What is HTML5?
It is the Hyper Text Markup Language. It is easy and fun to learn. HTML describes the structure of web pages.
Why learn HTML5?
It is essential to learn HTML if you want to build web sites , you can't build one if you font know HTML Because it's prerequisite in other languages.
Examples:
<!DOCTYPE html>
<html>
<head>
<titte> Hello World </tittle>
</head>
<body> this is a world </body>
<h1> Hello world </h1>
<p> hello world, have a tour </p>
</html>
Examples explain
! DOCTYPE html>: this declares the document type which is HTML5 • <html>: this element encloses everything inside of an html document; it includes tags, elements, style sheets, scripts, text, multimedia and a lot more <head> : this element encloses the metadata of a document which will not be displayed on the main content of a web page; this could include style sheets, scripts, <title>, <meta> tags and a lot more • <title>: this element defines the title of a web page; it appears on the upper-part of a browser <body> : this element encloses elements like <h1>, <p>, <img>, <b>, <i> and a lot more • <h1> : this element defines a heading • <p> : this element defines a paragraph.
HTML Tags HTML Tags
HTML Tags HTML Tags are element names surrounded by angle brackets. In HTML we start and end tags. Look at the example below. <p> Hello, welcome to Learn HTML
Start Tag and End Tag
Start Tag and End Tag Start tag - also called "opening a tag". Example: <p> • End tag - also called "ending a tag". Example: </p> This is the basic structure of any HTML page. Memorize them.
!DOCTYPE html>
<html>
<head>
<titte> Hello World </tittle>
</head>
<body> this is a world </body>
<h1> Hello world </h1>
<p> hello world, have a tour </p>
</html>
Where can I edit/create HTML files?
In a text editor! Creating HTML files is free you don't need to download expensive applications to do so. Look at the list below for some free apps you could use to edit HTML files.
Notepad Notepad++ • TextEdit • Sublime Text Editor • VIM • ATOM • Visual Studio Code Brackets Quoda (Android app) QuickEdit (Android app) • DroidEdit (Android app) • HTML Editor (Android app) • Dcoder (Android app) • This app! We have a micro code- editor with syntax highlighting and can save and open HTML Files.
Saving HTML Files You need to save your HTML files with the .html file extension.
For example, mywebpage.html.
If you don't save your files with the .html file extension, you won't be able to run it on browsers.
<p> Hello World! </p>
Lets try it by following these
steps: 1. Click the TRY IT YOURSELF button above.
2. Click the menu icon on the upper-right corner.
3. 3. Click SAVE AS.
4. Type mywebpage.html on the provided field.
5. Click SAVE. Just as easy as that, your HTML file is saved
HTML Elements
In the first lesson we have studied about tags and things like start tag (opening a tag) and end tag (closing a tag). An HTML element is usually composed of a "Start Tag", "Element Content" and an "End Tag".
Example: <p> This is an element content.
TRY IT YOURSELF)
Output: This is an element content.
The example HTML Element above is composed of the following:
• start tag: <p> • element content: This is an element content.
• end tag: </p>
• Example: <h1> Learning HTML Elements </h1 TRY IT YOURSELF)
•
Output:
Learning HTML Elements The example HTML Element above is composed of the following:
• start tag: <h1> • element content: Learning HTML Elements end tag: </h1>
• Nested HTML Elements There are some cases that an HTML element can contain one or more HTML elements. For you to better understand it look at the
• example code below. <p><i> Italicized text </i></p> TRY IT YOURSELF
• Output: Italicized text The example nested HTML Elements above are composed of the following:
Get Alok Flemi’s stories in your inbox
Join Medium for free to get updates from this writer.
• Start tag. <p>
• Start tag. <i>
• Element Content.
• Italicized text
• End tag. </i>
• End tag. </p> On the example above, there are two start tags and two end tags. The second tag i.e. <i> italicizes the text within. Empty Elements Empty Elements are elements that do not have an element content and an end tag. A list of commonly used Empty
• Elements:
• <meta />
• <link />
• <img />
• <br />
• <hr />
• <input />
HTML Attributes
HTML attributes are used to add more information to an HTML Element. Important Things to Remember
• HTML attributes are found in HTML tags.
• HTML attributes only appear at start tags. It will never be on end tags.
• HTML elements can have multiple attributes.
• HTML attributes are composed of name/value pairs.
• There are some attributes that can be used on all HTML Elements though they may not have effects on some elements. They are called Global Attributes. Click for an example.
An HTML attribute is composed of:
• an attribute name
• an equal = sign
• a value surrounded by quotation %3D marks "value" It looks like this: attributename="value" You can also use single quotation marks depending on the situation esp. when the value contains double quotes. We will only use double quotation marks throughout the entire tutorial. In this lesson we are going to learn some HTML Attributes with examples
Attribute lang Example:
<! DOCTYPE html>
<html lang="en-US">
<! -- html document/file content
</html>
We use the lang attribute to define the language of an HTML file. The language defined above is American English. Attribute href
Example: <a href="http://www.example.com"
TRY IT YOURSELF Links are defined using the anchor <a> element. On the example above we used the href attribute to tell the browser where to go. When clicked the user will be redirected to http://www.example.com.
Attribute title Example:
<a href="#link" title="I serve a
TRY IT YOURSELF
Output: Link The title attribute provides a tooltip for HTML Elements. Unfortunately, it doesn't work on mobile devices. If you want to see how it works click the "Try it Yourself" button then save the file as "filename.html" and open it on a browser using a desktop, laptop etc.
Attribute style Example:
<p style="font-size: 40px; color I am a paragraph with a size </p> TRY IT YOURSELF
Output: I am a paragraph with a font- size of 40 pixels and my colour is gold.
On the example given above we have created a paragraph using the <p> element. We also used the style attribute to change its font-size and color. Attributes id and class Example:
<div class="name">
<! --some content goes here </div> <div class="name">
<! - - some content goes here </div> <div id="name">
<! - - some content goes here </div>
The id and class attributes give references to elements inside an HTML document. Multiple elements can have the same class values/names. The id 's value should be unique for each element. These help us select elements in style sheets and scripts.
HTML Comments
HTML comments are text, phrases or sentences inside an HTML file. They are only shown in codes and not rendered by a browser. Why use HTML Comments? HTML comments both beginners and experienced web developers to easily organize their codes. They act like sticky notes in HTML files. How to write HTML Comments? An HTML Comment starts with
<! -- and ends with --> It looks like this:
<! -- comments go here -->
Example:
<p>
Sentences shown on browsers.
<! -- single-line comment -->
</p>
<p>
Sentences shown on browsers.
<! -- this is a multi-line co some phrases go here some phrases go here -->
</p>
<div>
<!-- putting comments besi Sentences, HTML elements and </div>
<! -- putting comments bes
Output:
Sentences shown on browsers. Sentences shown on browsers. Sentences, HTML elements and images may appear here. On the example given above, you have learned that you can make a single-line and multi-line of HTML comments. And if you noticed we also put comments beside a start and end tag. That is for us to easily recognize where a specific element starts and ends.
HTML Styles
HTML Styles are used to style HTML elements it also means changing default values. For instance, styling can change the default values of text color as black, background color as white, text alignment as left and text size as 12 pixels. Internal Style Sheet (internal styling) Using an internal style sheet is also called internal styling. An Internal Style Sheet is composed of one or more Cascading Style Sheet (CSS) rule- set. A CSS rule-set consists of a selector and a declaration block surrounded by curly braces that contains one or more CSS declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon
Internal Style Sheet Syntax
<style type="text/css">
p { font-size: 14px; }
</style>
V There will be a lot of Internal Styling examples throughout the entire tutorial so just keep going and enjoy!
Inline Styling Inline styling is used to style elements using the style attribute with CSS declarations inside which are similar to internal styling
