HTML Notes
(Feel free to add more info!!)
Learning Material: Great Learning
HTML stands for HyperText Markup Language
Hypertext means links between web pages. Markup Language means the text between
tags which defines structure. It is a language to create web pages.
HTML Editors:
● Notepad
● Notepad++
● Atom
● VS code
● Sublime Text (Best)
HTML Skeleton:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Some notes:
<!DOCTYPE html> - Instruction to the browser about the html version.
<html> - root element which acts as a countainter to hold all the code; the
browser should know that this is an html doc. Permitted content: One head tag
followed by the body tag)
HTML Comments
These don’t render on the browser. However, it helps understand our code better,
makes it readable and helps debug our code.
There are three ways to comment:
● Single line
● Multiple line
● Comment tag (Supported by IE)
To make an html comment:
<!-- text here -->
HTML Elements
Elements are created using tags and can be used to define semantics. They also can
be nested and empty.
Basic structure:
<p color=”red”> Element practice </p>
The structure above contains:
● Start tag: <p>
● Attributes: color=”red”
● End tag </p>
● Content: Element practice
(See Glossary for different elements)
Elements Types
Includes the following:
Block Level
Takes up a full block or width and adds structure in the web page. It always starts from
a new line, and always ends before the new line.
Examples are:
● <p>
● <div>
● <h1>...<h6>
● <ol>
● <ul>
Inline Level
Takes up what is required and adds meaning to the web page. It always starts from
where the previous element ends.
Examples are:
● <span>
● <strong>
● <em>
● <img>
● <a>
Basic Tags
These are enclosed within <>. Different tags render different meaning.
Examples are the following:
<title> tag
Whatever is written in this tag comes up with the web page’s tab. It defines the title of
the page.
Syntax: <title> Text here </title>
<p> tag
Defines a paragraph
Syntax: <p> Text here </p>
Self Closing Tags
Tags explicitly needed to be closed
Examples are the following:
<hr> tag
Stands for horizontal rule; divides the webpage.
<br> tag
Stands for break line, moves to the next line.
<h1> tag….. <h6>tag
Stands for heading tag. It defines the heading of the page. <h1> represents the most
important heading, while <h6> represents the least important.
—---------
Glossary
Video: HTML Tutorial for Beginners
Main glossary: HTML Elements Reference
—----------
Additional Notes
To make another page, insert a link
● Make another note in notepad with your content
● With the previous note, insert <a href="text.html">
● May add a text, ex: <a href="index.html"> Home </a>
To add an image
● Download image, name it as you wish
● Use <img src= "Name of Image. png">
● To adjust width and height, ex: <img src="Name of Image.png" width="400"
height="122">
● add alt for alternative text ex: <img src="KCC.png" width="400" height="122"
alt="Kevin Cookie Company Logo">
● PHOTO MUST BE IN THE SAME FOLDER AS THE HTML!!!
To add Audio
● <p> <audio src="Name of Audio" controls type="audio/mp3"></audio> </p>
● MUST BE IN THE SAME FOLDER AS THE HTML!!!
To make a table:
To add a form:
To add a name to the page:
● <title> Name of Page </title>
