Introduction to html course digital markerters

Introduction to html Y.Ravindra Reddy

https://www.seoskills.in

HTML Overview


HTMLHyper Text Markup Language


• HTML stands for Hyper Text Markup Language.

• It is developed by Tim Berner's Lee at W3C (World Wide WebConsortium).

• It is used to create Static Web pages.

• It is a global language i.e., it can be understood by all browsers.

• It is a markup language.

• It is not case-sensitive language.

• The latest version of HTML is HTML 5

• HTML documents are also called as web pages.

• HTML pages can run on any browser.


• HTML documents are simply text documents with a specific form

• Documents comprised of content and markup tags

• Content: actual information being conveyed

• The markup tags tell the Web browser how to display the page

• An HTML file must have an htm or html file extension

• An HTML file can be created using a simple text editor


HTML Tags


• HTML tags are used to mark-up HTML elements

• Surrounded by angle brackets < and >

• HTML tags normally come in pairs, like <tagname> (start tag) and </tagname>

(end tag)

• The text between the start and end tags is the element content

• Not case-sensitive

• Follow the latest web standards:

• Use lowercase tags


Tag Attributes


• Tags can have attributes that provide additional information to an HTML element

• Attributes always come in name/value pairs like: name=“value”

• Attributes are always specified in the start tag

• Attribute values should always be enclosed in quotes. Double quotes are most

common.

• Also case-insensitive: however, lowercase is recommended

• <tagname a1=“v1” a2=“v2”></tagname>

• For example, <table border=“0”> is a start tag that defines a table that has no borders


HTML Document Structure


Entire document enclosed within <html> and </html> tags

Two subparts:

1. Head

Enclosed within <head> and </head>

Within the head, more tags can be used to specify title of the page, meta-information,

etc.

2. Body

Enclosed within <body> and </body>

Within the body, content is to be displayed

Other tags can be embedded in the body


What We’ll Study?


• HTML Elements

• HTML Headings

• HTML Paragraphs

• HTML Formatting

• HTML Styles

• HTML Images

• HTML Tables

• HTML Lists

• HTML Forms

• HTML Colors


HTML Layout


One common way is to use HTML tables to format the layout of an HTML page

The trick is to use a table without borders, and maybe a little extra cell-padding

• Keep screen resolution in mind

• Use color to define spaces

• Align your images

• Balance the graphics and text on a page

• Think about text width – scan length 7 – 11 words

• Centering text is inadvisable

• Here is the link: http://webdesign.about.com/od/layout/a/aa062104.htm


HTML Frames


HTML frames are a means of having several browser windows open within a

single larger window

Each HTML document is called a frame

Disadvantages:

Must keep track of more HTML documents

Difficult to print the entire page


HTML Page Structure


Below is a visualization of an HTML page structure:

<html>

<body>

<h1>This a Heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>


HTML Versions


Since the early days of the web, there have been many versions of HTML

Version Year

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012


The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration helps the browser to display a web page orrectly.

There are many different documents on the web, and a browser can only display an

HTML page 100% correctly if it knows the HTML type and version used.


Common Declarations

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML code can be written in:

• Notepad

• Notepad++

• Microsoft Visual Studio

• Adobe Dreamweaver

• Microsoft Expression Web

• Edit Plus

• Text Pad

• Notepad++ etc.

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit

(Mac). We believe using a simple text editor is a good way to learn HTML.


HTML and XHTML Full References


Full Reference from W3schools:

http://www.w3schools.com/tags/

Test your HTML

http://www.w3schools.com/html/html_whyusehtml4.asp


Introduction to html course digital markerters

Education

Transcript of Introduction to html course digital markerters