HTML (hypertext markup language)
What is HTML?
Html is a markup language for creating a webpage. Webpages are usually viewed in a web
browser. They can include writing, links, pictures, and even sound and video. HTML is used to
mark and describe each of these kinds of content so the web browser can display them
correctly.
1) Choosing a text editor
a. Local html editors
➤ Dot html extension
➤ notepad on mac
➤ TextEditor
b. Popular programs
➤ atom sublime
➤ brackets txt regular webstorm
2) Creating an html file
An HTML document is a file containing Hypertext Markup Language, and its filename most often
ends in the . html extension. An HTML document is a text document read in by a Web browser
and then rendered on the screen.
3) Skeletons of html file
1. Doctype tag (<!DOCTYPE html>)
it describes what the document type the file is going to be.
NB:- most of the time it is put on the first line. Even before the html opening tag.
Eg. <!DOCTYPE html> this means the type of the document is html.
2. Container(opening and closing)tags (<html></html>)
This tag is the container of all other tags in the document except the doctype tag. The other tags
are going to be between the opening tag and the ending tag.
3. head tag (<head></head>)
This tag defines data about the document. So in here you can define things like;
➤ title of the document
➤ document description
➤ images that associated to the document
Eg. <head>ytg's website</head>
Most of the time the head tag is not going to appear on the document.
4. Body tag (<body></body>)
This tag is the tag where all of our html content is going to be. Everything we want to appear on
the document must be inside this tag.
Eg. <body>hello world</body> in here Hello world will appear on the document.
5. Paragraph tag (<p></p>)
This tag is the tag inside the body where we write everything we want to include in our
document.
Eg. <body>
<p>this is my first website</p>
</body>
6. Title tag (<title ></title >)
This is the tag inside the head tag and it is the official title of the website. It doesn't reveal on
the part of the document since it is inside the head tag. It is just the official title .
Eg. <title >Ykealo Tsegay website</title >
4) Basic tags
Basically most of the basic tags are used to edit our document.
1. meta tag
Basically it is a tag that defines information about the file. Inside of the meta tag we can use
different character encodings.
Character encoding is a method of converting bytes into characters.
Here are some of the character encodings:-
➤ onload
➤ charset
➤ http-equiv
➤ name and etc.
Eg. 1. <meta charset="UTF-8">
2. <meta name="description" content="this is an awesome website">
3. <meta name=”keywords” content=”education, knowledge, learning, schools”>
This is gonna be the words used to search the website.
4. <meta name=”viewport” content=”width=device-width, initial-scale=1”>
This tag controls how the website is displayed on different devices.
NB:- this tag is above the title under the head tag.
2. header tag (<h1></h1>, <h2></h2>)
This tag is the head of the document.
NB:- most of the time it is above the paragraph below the body tag.
E.g. <p><h1>under age marriage</h1></p>
h1 is the biggest header. The size of the header decreases when the value of hj increases.
3. Bold tag (<b></b>)
This is very important inside the paragraph tag to bold some of the words.
Eg. <p>i created a <b>website</b></p> so in this case the word website will be bolded.
4. italic tag (<i></i>)
The same as bolding.
Eg. <p>I love <i>oranges</i></p> here oranges will be italicized.
NB:- we can change the layout out of our document. For instance we can change the position
of the header tag and the paragraph.
5. Font tag (<font></font>)
The font tag is having three attributes called size, color, and face to customize your fonts. To
change any of the font attributes at any time within your webpage, simply use the <font> tag.
The text that follows will remain changed until you close with the </font> tag. You can change
one or all of the font attributes within one <font> tag.
a. Font size:
You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
Eg. <body>
<font size="1" >font size 1</font>
<font size="5" >font size 5</font>
</body>
result=
Font size = "1" and
Font size = "5"
b. Font color
This controls the color of the text.
Eg. <font color=”red”>this is me</font>
result= this is me
c. font face
This font controls the font type.
Eg. <font face=”arial”> this is me </font>
result= this is me
6. break tag (<br/>)
It creates a new line in our document. For instance if we want to create a space between the
header and the paragraph, then the break tag will be under the header tag.
7. horizontal rule tab tag (<hr/>)
It is a straight line across the website that's gonna be helping us separate some of our content.
Eg. <p>stop corruption</p>
<hr/>
After this the phrase stop corruption will be underlined.
NB:- both break tag and horizontal tag are single tags and put under the text we wanna apply
them in.
8. bid tag (<big></big>)
It is a tag used to make some of the words inside the paragraph bigger.
Eg. <p><big>hello world</big></p> then the phrase Hello world will be bigger.
9. Small tag (<small></small>)
The same as the big tag.
10. Subscript tag (<sub></sub>)
Most of the time it is used when the document is about math or chemicals.
Eg. <p>h2o</p> to make 2 subscript,
<p>h<sub>2</sub>o</p> then 2 will be subscript.
11. Superscript (<sup></sup>)
Eg. <p>102</p> to make 2 the superscript,
<p>10<sup>2</sup></p> then 2 will be the superscript.
11. Non breaking space ( )
This element creates an extra space in between texts.
Eg. <header> Home About Contact us </header>
Result= Home About Contact Us
12. Button (<button></button>)
It is used to add a button in our pages.
Eg.
<button>Click me</button>
5) Comments (<!-- -->)
The comments we create will be ignored by the browser and generally the purpose of
comments is for either yourself to read or other developers to read.
The html comment is different from the other texts in terms of font. When you create a
comment all the codes below the comment will turn into a comment, but we can create an
opening and closing comment tag so that we can only create a comment inside of the tag
without including the other texts.
Eg. <!-- adhfj hrbjd hfjh> here the words inside the tag will be commented.
6) Style and color
When we style html elements, we can use something called a style attribute. The style attribute
specifies an inline style for an element.
We can use style and color inside any of the tags that we want to edit them.
Eg. 1) <p> style="color: blue;">I am happy</p>
So after this the sentence “I am happy” will turn to blue.
In addition we can also change the background color of the text we want or the entire
document by inserting the background attribute.
Eg. 2) for the above example
<p style="color: blue; background-color: red;">I am happy</p>
Here we will have blue text and red background color only for the text we chose.
NB:- to change the background color of the entire document put the style and color attribute
inside the body tag.
7) Formatting a page
There are various tags that help us to layout the different content in our website into different
sections.
NB:- most of the time these tags are inside the body tag.
Most web pages are gonna have three distinct sections. And these are;
1. Header (<header></header>)
This Tag is up on the top and generally it is an element that’s on every page of the website. So
this could be a navigation menu. Such as like; logo or the name of the website.
2. Main section (<main></main>)
This is where all the content of our website is gonna go.
3. Footer (<footer></footer>)
Most websites are gonna have a footer right when you scroll all the way down to the bottom.
Some of the footers are; sources, branding information and links for social media.
4. Navigation bar (<nav></nav>)
It is used to store navigation elements. Such as; home, content, contact us will be inside this
navigation tag.
NB:- most of the time it is inside the header tag.
5. Article tag (<article></article>)
Inside of this tag we can put all the text for our article.
NB:- most of the time it is inside the main tag.
8) Links
A link is one of the most popular html elements and it is used to link your website to other
websites on the internet.
Examples of links:
<a href=”[Link] homepage</a>
➤ The H ref is basically just where we want to link our website to.
➤ We can also open the link in new tab instead of navigating the website.
<a href=”[Link] target=”_blank”>google’s homepage</a>
NB:- we can also link our website to other videos, images or other websites instead of google.
Eg. <a href="[Link]
target="_blank"><big><b>follow this link to observe skills<b/></big></a>
In the above example the ltext follow this link to observe skills will be the main link for the
video.
9) Images
<img src=”source of the image” alt=”describe the image”/>
Inside the SRC (source) we are gonna put the file’s name or the link of the image if it was from
the internet.
Eg. <img src=”geogebra-imj” alt=”basic circle”/>
NB:- we can also resize the image.
Eg. <img width=”100” height=”100” src=”geogebra-imj” alt=”basic circle”/>
NB:- most of the time if we want to insert two images side by side, the maximum width is
700-750pixel×700-750pixel.
We can also create a link in the image.
Eg. <a href=”[Link]
target=”_blank”>
<img src=”[Link]” alt=”king of football”/>
</a>
So here when we click the messi’s image, the above link will display.
10)Videos and YouTube iFrames
a. Local videos (<video></video>)
➥ if we want to display the video,
<video src=”video name” controls></video>
➥ we can also control the size of the video.
<video src=”video name” controls width=”100”></video>
Here the height of the video will be automatically resized.
➥ we can also control the thumbnail of the video.
Thumbnail is the picture of the first scene of the video.
<video src=”video name” poster=”name of the image we [Link]” controls
width=”100”></video>
b. Videos from youtube
Inorder to include youtube videos in your website,
1. Click the share button on the video you want to include
2. Click embed
3. You’ll find an html code which is called an iframe tag
4. Copy all the iframe tag
5. Paste the iframe tag in your document.
➥ we can also resize the video.
iFrame is a tag that allows the video to display on other websites.
11) Lists
Html allows you to list out a group of items and it provides you with a couple different tags to
do that.
Eg. to list names, steps or others.
a. Unordered list (<ul></ul>)
This is a list that doesn’t have a particular order.
Eg. <ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
result=
● Apples
● Oranges
● bananas
b. Ordered lists (<ol></ol>)
This will have a numerical order instead of dots.
Eg. <ol>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>
result=
1. Apples
2. Oranges
3. Bananas
NB:- we can change the style of the lists. We can change the numerical list to alphabetical or
romanian numbers.
Eg. <ol type=”A”>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>
result=
A. Apples
B. Oranges
C. Bananas
12) table (<table></table>
There are some lay-outs of table.
a. Table row (<tr></tr>)
It is a horizontal part of the table. We can also define the individual data for the table inside the
table row.
Eg. <table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
So this table is gonna have three columns in one row.
Which is; one two three
➥ we can also add another row.
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>orange</td>
<td>banana</td>
<td>apple</td>
</tr>
</table>
result= one two three
Orange banana apple
NB:- the next row is right below the closing tag of the previous row.
➥ we can also add headers for the data by changing the table data <td> to table header <th>.
The text inside the table header is gonna be the title of the column.
Eg.
<table>
<tr>
<th>volume</th>
<th>area</th>
<th>length</th>
</tr>
<tr>
<td>27cm3</td>
<td>9cm2</td>
<td>3cm</td>
</tr>
</table>
result= volume area length
27cm3 9cm2 3cm
B. caption (<caption></caption>)
This tag is the overall title of the table. We can change the size of the caption tag with the
headers of 1-7.
Eg.
<table>
<caption>measurements</caption>
<tr>
<th>volume</th>
<th>area</th>
<th>length</th>
</tr>
<tr>
<td>27cm3</td>
<td>9cm2</td>
<td>3cm</td>
</tr>
</table>
result= measurements
volume area length
27cm3 9cm2 3cm
➥ we can also style the table using the table attributes.
1. Adding line
Eg.
<table border=”1”>
<caption>measurements</caption>
<tr>
<th>volume</th>
<th>area</th>
<th>length</th>
</tr>
<tr>
<td>27cm3</td>
<td>9cm2</td>
<td>3cm</td>
</tr>
</table>
result=
measurements
volume area length
27cm3 9cm2 3cm
2. Cellpadding
It controls the amount of extra space inside each cell.
NB:- most of the time it is after the border.
3. Cellspacing
It controls the space between cells. It separates each cell in a box.
NB:- most of the time it is after the cellpadding.
4. colspan
It is used to put two or more cells under one column.
NB:- Most of the time, we put this attribute inside the table header that we want to divide it.
Eg.
<table border=”1” cellpadding=”1” cellspacing=”10”>
<caption>measurements</caption>
<tr>
<th>volume</th>
<th colspan=”2”>area</th>
<th>length</th>
</tr>
<tr>
<td>27cm3</td>
<td>9cm2</td>
<td>3cm</td>
</tr>
</table>
result=
measurements
volume area length
27cm3 9cm2 9m2 3cm
Now the area column has two cells.
13) Diva and spans
➥ Both diva spans tags that you can use as containers. You can put a bunch of different html
elements inside of a diva and span.
➥ the difference between divs and spans is; spans are inline containers, and divs are block
containers.
1. Span container (<span></span>)
Since span displays inline containers, the text inside this tag is gonna be displayed right next to
each other.
Eg. <span>span 1</span>
<span>span 2</span>
result= span 1 span 2
2. Div (<div></div>)
Since divs are a block container, the texts inside this tag are gonna be up and down.
Eg. <div>div 1</div>
<div>div 2</div>
result= div 1
div 2
14) input & forms
Basically input tags allow you to add elements on your page. Where users can put information.
Such as; text boxes or text areas.
NB:- this tag is a single tag.
Eg. <input type=”text” />
result= it is gonna create a text box, where users can type.
Jvhiuhti nbtohi nbiuefr9ghreui9 bjvighurb.
➥ We can also create a box for a password.
Eg. <input type=”password” />
result= instead of words it is gonna be dots.
………………………………
……...
➥ we can also define default content inside of these text boxes.
Eg. <input type=”text” value=”enter user name”/>
result=
Enter user name
➥ we can also create a text area instead of just having one single line.
Eg. <textarea>
</textarea>
result=
Hjdhjio
Nkjokjreok
Nvkjlekjeko
vjuhrkjbnklf
➥ We can also resize the textarea.
Eg. <textarea rows=”10” cols=”30”>
</textarea>
result=
Yrnjkmnk
Shui9jo
Dfni Opj
Nkod Frio
Dior Kokr
dhnuirhejk
➥ we can also define default text inside the textarea.
Eg. <textarea rows=”10” cols=”30”>
Enter Your Comment
</textarea>
result=
Enter Your Comment
➥ We can also define all these things inside the input tag;
Date, email, range, file, checkbox and radio.
NB:- Most of the time checkbox and radio are buttons used to choose or tick.
➥ The difference between the checkbox and radio is that: the checkbox is squared and the
radio is circle.
Eg. <input type=”checkbox” />
➥ we can make a choice button.
Eg. <input name=”btn” type=”radio” />
<input name=”btn” type=”radio” />
This is gonna be two buttons but we are supposed to choose one of the radios.
For more information;
[Link]
15) iFrames (<iframe></iframe>)
It is an html element used to display another website inside of the webpage.
Eg. <iframe src=”[Link] width=”1000” height=”800”> we can type here</iframe>
