What is HTML? HTML stands for HyperText language HTML is that the standard nomenclature for creating websites HTML describes the structure of an internet page HTML consists of a series of elements HTML elements tell the browser a way to display the content HTML elements label pieces of content like "this may be a heading", "this may be a paragraph", "this may be a link", etc. What is HTML? HTML stands for HyperText Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title> Title</title>
</head>
<body>
<h1>My Heading</h1>
<p>paragraph.</p>
</body>
</html>
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for HyperText Markup Language.
Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.
A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.
What are Tags and Attributes?
Tags and attributes are the basis of HTML.
They work together but perform different functions – it is worth investing 2 minutes in differentiating the two.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
HTML has six "levels" of headings:
which are
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Note text size decreases for h1 to h6
Bold & Italic
By enclosing words in the tags<b>and</b> we can make characters appear bold. The element also represents a section of text that would be presented in a visually different way (for example keywords in a paragraph) although the use of the element does not imply any additional meaning.
<I>
By enclosing words in the tags<i> and </i> we can make characters appear italic. The element also represents a section of text that would be said in a different way from surrounding content — such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicized.
<sup>
The <sup> element is used to contain characters that should be superscript such as the suffixes of dates or mathematical concepts like raising a number to a power such as 2.
<div>
The div tag is used for dividing the webpage into the different division as the programmer want for more information see this video
<iframe>
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Tip: you must include the iframe title in your iframe
example:<iframe src="http://ontrendtz1.epizy.com/" title="techdelers website"></iframe>
<img>
Images help to improve the design and the appearance of a web page.
how to use img tag in HTML example <img src="ombeni.png" alt="this is my photo">
<table>
This help web developers to arrange data into rows and columns.
example
Company Contact Country
Ozata ombnei Zakaria Tanzania
Techdelers tech USA
The <form>
The HTML <form> help to create user input:
<form>
<input type="text">
</form>
Example of form:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
<Video>
The HTML <video> element is used to show a video on a web page.
Example
<video width="320" height="240" controls>
<source src="videoPath.mp4" type="video/mp4">
</video>
Examples
How to create a navigation bar in HTML and CSS
HTML
<ul id="navbar">
<li><a href="/tests">Tests</a></li>
<li><a href="/studyroom">Q & A Forum</a></li>
<li><a href="/flashcards">Interview QnA</a></li>
<li><a href="/library">Tutorials</a></li>
<li><a href="/testimonials">Testimonials</a></li>
</ul>
css
#navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #EEEEEE;
}
ul#navbar li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
text-decoration: none;
}
ul#navbar li a:hover {
background-color: orange;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #EEEEEE;
}
li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: orange;
color: white;
Comments