1. Intro to HTML
HTML(HyperText Markup Language) is a language used to outline the basic information on the page.
It mainly consists of tags that are used to divide the page into different parts.
1-a Tags
Tags are bits of code(?) that show what the text you input is going be used for.
Most tags are structured like the picture shown.
- Tag List
<!DOCTYPE html>
-> placed at line 0
<html></html>
-> placed at the start and end of the code
<head></head>
-> placed within the html tags
-> the code included does not show within the page
<meta charset = "utf-8">
-> placed within the head tags
-> used for pages that are printed in english
<title>
-> title of page
<body></body>
-> placed within the html tags
-> the code within this tag illustrates the visual
parts of the page
<hn></hn>
-> theses tages are used to show structure within the info
of the page
-> the 'n' can be any number between 1 and 6, 1 being the top
<p></p>
-> used with the <hn> tags the <p> tag is used for paragraphs
within the body
<br>
-> a line break tag used to go to the next line
<strong></strong>
-> used to make letters bold
<em></em>
-> used to italicize letters
<ul></ul>
-> creates an unordered list of objects
<ol></ol>
-> creates an ordered list of objects
<li></li>
-> creates ojects for the lists
<img src="https://www.someimage.org/someimage.png" alt="someimage"
width="###" height="###">
-> inserts images within the page
-> alt is a name to refer the image by for people without sight
-> width and height can be manually set but if you set
the width the height will be automatically resized2. CSS
CSS(Cascading Style Sheets) is a language used to define styles that compose different parts of the page(font,size,layout,color)
- CSS code
CSS is specified within the tags which are included within the tag.
a. Changing colors
In order to change the color of text or background, choose a color using the rgb() function and add it within the tag type bracket.
<head>
<meta charset="utf-8">
<title>example</title>
<style>
h1{
color : rgb(209, 27, 209);
}
body{
background-color :rgb(29, 179, 101);
}
p{
background-color :rgb(247, 40, 17);
color : rgb(250, 250, 250);
}
</style>
</head>
b. Selecting by ID
In order to change aspects of specific tags you can add an ID attribute to the HTML tag. You MUST make the IDs unique!
****** (within <style> tag) ******
#tagList{
background-color : yellow;
}
#redTag{
color: red;
}
#blueTag{
color: blue;
}
#blackTag{
color: black;
}
****** (within <body> tag) ******
<ul id="tagList">
<li id="redTag">head is a tag</li>
<li id="blueTag">body is a tag</li>
<li id="blackTag">p is a tag</li>
</ul>
*********************************
c. Selecting by Class
In order to chang aspects of a group of tags you can add a Class attribute to the HTML tag.
****** (within <style> tag) ******
.info{
background-color: orange;
color: white;
}
****** (within <body> tag) ******
<ul id="tagList">
<li id="redTag">
head is a tag<br>
<p class ="info">
head is for the header
</p>
</li>
<li id="blueTag">
body is a tag<br>
<p class ="info">
body is for the main info
</p>
</li>
<li id="blackTag">
p is a tag<br>
<p class ="info">
p is a paragraph
</p>
</li>
</ul>
*********************************---Example Workload---
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Practice Code </title>
<style>
h1{
color :rgb(209, 27, 209);
}
body{
background-color :rgb(29, 179, 101);
}
p{
background-color :rgb(247, 40, 17);
color : rgb(250, 250, 250);
}
#tagList{
background-color : yellow;
}
#redTag{
color: red;
}
#blueTag{
color: blue;
}
#blackTag{
color: black;
}
.info{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<h1>
This page is for practicing
</h1>
<h2>
HTML
<p>
HTML which stands for HyperText Markup Language is
what I am learning rn
</p>
<p>
List of tags
</p>
<ul id="tagList">
<li id="redTag">
head is a tag<br>
<p class ="info">
head is for the header
</p>
</li>
<li id="blueTag">
body is a tag<br>
<p class ="info">
body is for the main info
</p>
</li>
<li id="blackTag">
p is a tag<br>
<p class ="info">
p is a paragraph
</p>
</li>
</ul>
</h2>
</body>
</html>