Basics of HTML 5 for Beginners

Preview:

Citation preview

Basics of HTML 5 by MediaLinkers

Table of ContentIntroduction To HTMLHow to start HTMLText Formatting TagsHTML Image TagBackground Text Color TagText Alignment TagHTML Table TagHTML Form Tags

• HTML Stands for Hyper Text Markup Language.• It is the language for building web pages through that you

can create your own website.• It is derived from SGML Language (Standard Graphic

markup Language)• It uses markup tags to describe web pages.• HTML tags normally come in pair like opening tag <h2>

and closing tag </h2> • It is not a case sensitive language

What is HTML?

Write HTML code in • Notepad, Notepad++, PspadOr You can also use HTML editors like • MS FrontPage• Macromedia Dreamweaver• Netscape Composer• Expression web

How to Start HTML?

Sample of HTML Document

HTML Page Structure

Image source: w3school.com

• After Writing HTML code in any of the given file, save the file with (.html) (.htm) extensive.

• Now you can view the file in any browser like, Chrome, Firefox etc.

How to Start HTML?

HTML Page in Web Browser

HTML tags are consist on 2 types.• Container Elements:

Container tags contains start tags and end tags like <HTML> and </HTML>

• Empty Elements:Empty tags contains start tags like <BR>

Kind of HTML Tags

HTML headings are defined with the <h1> to <h6> tags:

<h1>MediaLinkers Atlanta Web Design</h1><h2>MediaLinkers Atlanta Web Design</h2><h3>MediaLinkers Atlanta Web Design</h3><h4>MediaLinkers Atlanta Web Design</h4><h5>MediaLinkers Atlanta Web Design</h5> <h6>MediaLinkers Atlanta Web Design</h6>

HTML Headings

HTML paragraphs are defined with the <p> tag like:<p>Medialinkers web design company is working in Kennesaw and Atlanta since 2002.</p><p>We at medialinkers have a team of expert web designers and developers, who know the best design for your company.</p>

HTML Paragraph

HTML links are defined with the <a> tag:

<a href="http://www.medialinkers.com">Web Design Atlanta</a>

HTML Link

• <b> Identifies bold text• <big> Identifies big Text• <em> Identifies emphasized text• <i> Defines italic text• <Small> Defines small text• <strong> Defines strong text• <sub> Defines subscripted text

Text Formatting Tags

• <super> Superscripted text• <ins> Inserted text• <del> Deleted text• <tt> Teletype text• <u> Underline text• <strike> strike text

Text Formatting Tags Cont…

• The <img> tag defines an image in an HTML page.

• The <img> tag has two required attributes: src and alt.– Alt Specifies an alternate text for an image– Src Specifies the URL of an image

HTML Image Tag

The attribute bgcolor is used for changing the back ground color of the page.

<body bgcolor=“Blue” > Text is use to change the color of the enclosed text.

<body text=“white”>

Background Text Color Tag

• Left alignment <align=“left”>

• Right alignment <align=“right”>

• Center alignment <align=“center”>

Text Alignment Tag

• <table> Used to create table • <tr> table is divided into rows • <td> each row is divided into data cells• <td> Headings in a table • <caption> caption to the table • <colgroup> Defines groups of table columns • <col > Defines the attribute values for one or more columns in a

table • <thead> Defines a table head • <tbody> Defines a table body • <tfoot> Defines a table footer

HTML Table Tag

• <cellpadding> Amount of space between table cells.

• <colspam> Space around the edges of each cell • <rowspan>No of column working with will

span • <border> No of rows working with will span

attribute takes a number

HTML Table Tag Cont…

There are three main types of HTML list tags

• <UL> Unordered lists (bulleted lists)

• <OL> Order lists (numbered lists)

• <DT> Definition lists (for definition lists)

HTML List Tags

• <form> Defines form for user input• <Input> For input field• <text> For single line text entry field• <textarea> Define a text area• <password> Create single line text area shown

(*)• <label> Defines Selectable list• <option> Defines a push button• <select> Select or unselect a checkbox

HTML Form Tags

Medialinkers is a Kennesaw and Atlanta based web design company.

For more info visit: www.medialinkers.com

Address: 350 Wooten Lake Rd NW Suite 102, Kennesaw, GA 30144, United States

Phone:+1 678-369-6000

Created by Medialinkers

Where we Strive to Make Your online Business a Success.

Medialinkers Kennesaw Web development