Search

How websites work

Updated: Apr 15

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


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.

https://www.w3schools.com/html/default.asp


Two areas in page:

<head>

<body>

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 https://devdocs.io/html/


https://developer.mozilla.org/en-US/


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">
<head>
 <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>
</head>
<body>
 <table cellspacing = "20">
 <tr>
 <td> <img src="images/arturo.jpg" alt="Arturo Devesa Picture"></td>
 <td><h1>Arturo Devesa</h1>
 <p><em>Founder & CTO of <strong><a href="https://www.medwhat.com">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>
 </tr>
 </table>
 <hr>
 <!-- hr = horizontal rule-->
 <h3>Education</h3>
 <ul>
 <!--unordered list-->
 <li>Bachelors in Business Administration</li>
 <!--li listed item-->
 <li>MBA</li>
 <li>Masters of Science in Economics, Major in Econometrics</li>
 </ul>
 <hr>
 <h3>Work Experience</h3>
 
</body>
</html>

Big picture:


  1. HTML is the structure

  2. CSS is the styling of the markup language

  3. JavaSscript is the functionality


CSS


Inline CSS


style="" is the element that takes css code


use hexadecimal values for color

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

Internal CSS

<style>

 body{
 background-color: #EAF6F6;
        }
 
 hr {
 background-color: grey;
        } 
 </style>

there's default style in css in web browsers.


External CSS


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

CSS Syntax

selector{ property: value;}

Who, what, value


Class selectors vs tag selectors vs ID selectors


.class{}

<img class="class"...


tag selector{}

<h1 ...


#name_of_id{}

<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>

Padding

Border

Margin

Length

Width


Display:

Inline

Block

Inline-block

None


CSS POSITIONING


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

img{

position: relative;

left: 30px

}

Four coordinate

Top

Bottom

Left

Right



Absolute -

Fixed



Recent Posts

See All

Socket Programming in Python

Sockets and the socket API are used to send messages across a network. The network can be a logical, local network to the computer, or one that’s physically connected to an external network like the i

Financial Machine Learning

"The essential tool of econometrics is multivariate linear regression, an 18th century technology that was already mastered by Gauss before 1794...It is hard to believe that something as complex as 21

©2020 by Arturo Devesa.