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.
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/
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:
HTML is the structure
CSS is the styling of the markup language
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 ...
<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