How websites work

Updated: Apr 15, 2020

We use a web browser.

HTML is the structure code of a website. e.g. structure of a house.

CSS is the style code of a website and make it look the way you want it to.

Javascript is the code that allows your website to do things and have behavior and functionality, e.g. plumbing and electrical work in a house

We receive these files from the website's server.

index.html is name of main file connecting to other files like contact.html

index.html saved and located in apache web server on var/www/html directory on your website's server.


HTML Hyper-text Markup Language: based on markup that it used to be used by manuscripts by editors to specify changes to the authors or changes in layout. ex. this part should be printed in bold, or italics.

HTML tags allows for the creation and changes of your website.

Codepen allows to create websites.

Two areas in page:



inside <html>tag

The basic elements of an HTML page are:

  • A text header, denoted using the <h1> , <h2> , <h3> , <h4> , <h5> , <h6> tags.

  • A paragraph, denoted using the <p> tag.

  • A horizontal ruler, denoted using the <hr> tag.

  • A link, denoted using the <a> (anchor) tag.

There are 134 elements in HTML on

The browser is the text editor.

Closing tags <h1> and self-closing tags <br>

<br size="3">

attributes inside elements

eg size="" for modifications to size element

<!DOCTYPE html>
<html lang="en">
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta charset="UTF-8">
 <meta name="description" content="Arturo Devesa">
 <meta name="keywords" content="Arturo, Devesa">
 <meta name="author" content="Arturo Devesa">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>😂😎Arturo's personal site</title>
 <table cellspacing = "20">
 <td> <img src="images/arturo.jpg" alt="Arturo Devesa Picture"></td>
 <td><h1>Arturo Devesa</h1>
 <p><em>Founder & CTO of <strong><a href="">MedWhat</a></strong></em></p>
 <!-- em = emphasis, strong = bold-->
 <p>I'm a software engineer, love doing triathlons, and hiking mountains.💪</p>
 <!-- p = paragraph tag--></td>
 <!-- hr = horizontal rule-->
 <!--unordered list-->
 <li>Bachelors in Business Administration</li>
 <!--li listed item-->
 <li>Masters of Science in Economics, Major in Econometrics</li>
 <h3>Work Experience</h3>

Big picture:

  1. HTML is the structure

  2. CSS is the styling of the markup language

  3. JavaSscript is the functionality


Inline CSS

style="" is the element that takes css code

use hexadecimal values for color

<body style="background-color: #EAF6F6;">

Internal CSS


 background-color: #EAF6F6;
 hr {
 background-color: grey;

there's default style in css in web browsers.

External CSS

<link rel="stylesheet" href="css/styles.css">

CSS Syntax

selector{ property: value;}

Who, what, value

Class selectors vs tag selectors vs ID selectors


<img class="class"...

tag selector{}

<h1 ...


<h1 id="name_of_id"

IDs are unique in each page and are more unique in name

There can be many classes with same name, classes can have same name for different tags

The Box Model of Website Styling

The position of elements are determined by many things

<Div> - Content Division tag

<element style>












Static - elements look like that when there's no css positioning property value (default)

Relative - to where the element would have been had it been static


position: relative;

left: 30px


Four coordinate





Absolute -


Recent Posts

See All

AI behavioral prediction

what you want is ultimately to learn about human behaviors and anticipate them. That’s called behavioral prediction. These behavioral predictions are made using recurrent neural networks: they use pas