0% found this document useful (0 votes)

19 views

HTML5

Uploaded by

lyricstalksyt

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

19 views

HTML5

Uploaded by

lyricstalksyt

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 15

HTML5 Introduction

What is HTML5?

HTML stands for Hyper Text Markup Language, it is easy and fun to learn.

HTML describes the structure of web pages.

HTML5 is the fifth and current major version of the HTML

standard.

Why learn HTML5?

It is essential to learn HTML if you want to build web sites, you can't build one if you don't know HTML
because it's one of the prerequisites in learning other languages used for web development.

For you to learn faster and see how our examples would actually look like simlarly on a real browser we
have implemented a simple Try it Yourself Editor with syntax highlighting where you can play and
experiment with the example codes given.

Example:
Reselt:

This is a heading
Example Explained

★ <!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 are element names surrounded by angle

brackets. In HTML we start and end tags. Look at the example below.

<p> Hello, welcome to HTML. </p>

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!

HTML Editors

Where Can I Edit/Create HTML Files?

You can use a text editor! Creating HTML files is completely free, and you don't need to download
expensive applications. Take a 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 offer a micro code-editor with syntax highlighting that can save and open HTML files.

These are among the most commonly used text editors for creating HTML files. You have the freedom to
download any application you prefer.

Saving HTML Files

It's important to save your HTML files with the .html file extension, such as "mywebpage.html". If you
don't use the .html extension, your files won't be compatible with web 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. 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

An HTML element is usually composed of a "Start Tag", "Element Content" and an "End Tag".

Example:

<p> This is an element content. </p>

The example HTML Element above is composed of the following:

⚫ start tag: <p>

⚫ element content: This is an element content.

⚫ end tag: </p>

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>

The example nested HTML Elements above are composed of the following:

• 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.

A list of commonly used Empty Elements:

★ <meta />

★ <link />

★ <img />

★ <br />

★ <hr />

★ <input />

The best practice in HTML Empty Elements is to always put a forward slash / sign before the greater
than > sign.

In this way they are closed at their start tags

HTML Attributes
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 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:

We use the lang attribute to define the language of an HTML file. The language defined above is
American English.

Attribute href Example:

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:

Attributes id and class Example:

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

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 help 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:

Example:
HTML Styles

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.

They are all enclosed inside the <style> element with its type="text/css" attribute which is included
inside the <head> element.

Internal Style Sheet Syntax

Inline Styling Inline styling is used to style elements using the style attribute with CSS declarations inside
which are similar to internal styling.

Inline Styling Syntax

Background Color Example:

Text Color Example:

Text Font-Family Example:

HTML Colors

HTML Colors define colors that we see on a web page.

In this lesson we will use inline styling with CSS properties color and background-color to change the
text color and/or background color of HTML Elements.

HTML Colors can be defined using the following:

• Color Name. It defines any valid color by its color name e.g. white, black.

• Hex Color Value. Or Hexadecimal Color Value. It defines any valid color by a hash followed by letters
and/or numbers e.g. #ffffff, #000000 . • RGB Color Value. RGB stands for Red, Green, Blue.

It defines any valid color by this format "rgb(number, number, number) "e.g. rgb(255, 255, 255),
rgb(0, 0, 0). The numbers represent the intensity of the red, green and blue colors in that particular
order.

Example:
Most Common HTML Colors

As Background
As Text