Tutorial
Fast Tutorial of:
HTML
Fast Explanation
HyperText Markup Languaje (index.html): is all about tags. Example of tags ⇒ <p> </p>. It's important to remember: the OPEN tag, the KEYWORD and the CLOSE tag. Keep that in mind.
The very first tag (in a html document) will always be ⇒ <!DOCTYPE html><html> </html>. See more in Advance Example.
There is 2 types of tags: inline and block tags. The block one is so big it have a 100% width. The inline tag will have enough width to contain what's inside it. See more in Simple Example.
Between the OPEN tag, you can put another keyword (ATTRIBUTES) to make the tag more unique. It have to looks like this: 1.[keyword="value"] class="container" 2. [keyword] hidden. See more in Simple Example.
Simple Example
<p> I am a paragraph tag and I'm a block tag with no attributes </p>
<span hidden> I'm a inline text tag with 1 attribute (to keep me invisible) </span>
<a href="https://google.es"> I'm a inline link tag. Click me and we'll go to Google's Browser</a>
Advance Example
<!-- This is a comment tag (never shown in a website) -->
<!DOCTYPE html> <!-- This is to recognize the languaje -->
<html> <!-- This tag represent the whole webpage -->
<head> <!-- Here should go style links and info of the page (meta tags) -->
<title>My First Webstite</title> <!-- The title is the tab name -->
</head>
<body> <!-- The body of the page. -->
<p> I am a paragraph tag and I'm a block tag with no attributes </p>
<span hidden> I'm a inline text tag with 1 attribute (to keep me invisible) </span>
<a href="https://google.es"> I'm a inline link tag. Click me and we'll go to Google's Browser</a>
</body>
</html>
User's Recommendation
ALL THE IMPORTANT TAGS (html, head, link, title, body, header, h1-h6, body, p, a, span, footer and script).
Interesting TAGS: strong, i, img, ul, ol, li, select, option, section, article, details, summary, br and hr.
Wanna feel like a hacker? In any website, press Ctrl + U (this will open a new window with the source code of the website). Take a closer look and see how it is divided. Another tip: try it in my pages.
Indentation is SUPER IMPORTANT. Indentation is spacing the element (usually using the tab key [⇆]). Is used to see, a plain sight, what's inside of what.
CSS
Fast Explanation
Cascade Style Sheet (style.css): is used to make more stylish the entire World Wide Web. You can personalize more your tag (putting colors, changing the appearance and position of letters, ...).
Syntaxis 1: tag{ keyword: "value" }; See more in Simple Example.
There is 2 mode of linking it to the HTML file: inside and outside. See more in Advance Example 1.
There is 2 mode of syntaxis in the CSS file: "Normal" and Nesting. See more in Advance Example 2.
You have more details of Normal Vs Nested Syntaxys in User's Recommendations
Simple Example
body{
background-color: black;
color: white;
text-align: center;
}
Advance Example 1
//Inside HTML & "Normal" Syntaxis
<!DOCTYPE html> <!-- This is to recognize the languaje -->
<html> <!-- This tag represent the whole webpage -->
<head> <!-- Here should go style links and info of the page (meta tags) -->
<title>My First Webstite</title> <!-- The title is the tab name -->
</head>
<body> <!-- The body of the page. -->
<style>
a{
color: red;
}
a:hover{
color: green;
}
a:active, a:visited{
color: white;
}
</style>
<a href="https://google.es"> I'm a inline link tag. Click me and we'll go to Google's Browser</a>
</body>
</html>
Advance Example 2
//Outside HTML & Nested Syntaxis
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/folder/css/style.css" >
.
.
.
</head>
</html>
/* style.css */
body{
header{
background-color: pink;
>h3{
text-align: center;
}
}
main{
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
a{
text-decoration: none;
&:hover{
color: red;
}
&:active, &:visited{
color: white;
}
}
}
}
Advance Explanation (Syntaxis)
Syntaxis 2
- "X Y" => Y tag is inside X (any level)?
- "X+Y" => Y tag and Y tag are together (same level)?
- "X>Y" => Y tag is directly inside
- "X[title]" => only X with that attribute will be selected
- ".container *" => Anything in the container class
- "input#password" => The input tag with the ID password will be selected
- "X, Y" => X tag and Y tag
User's Recommendation
Use the Outside Method to link an Style. Why? It have better scalability, more readability and if something isn't working you'll know what is (better debugging)
Use the "Nesting" Syntaxis to know what's inside what. Example: In plain sight, you will see, as in the .html, that there is a class "container" and inside there is 2 span tags and 1 link:
Code Example (Normal vs Nesting Syntaxis)
/*Normal Syntaxis*/
.container{
border: 1px solid black;
}
.container span{
text-indent: 5px;
}
.container a{
text-decoration: none;
}
.container a:hover{
color: blue;
}
/*Nested Syntaxis*/
.container{
span{
text-indent: 5px;
}
a{
text-decoration: none;
/* The "&" is referencing the tag (a tag in this case) */
&:hover{
color: blue
}
}
}