Html basic

BY- VICCKY .D. KHAIRNAR

BASIC HTML

What is Markup ?Markup is information that is added to a document to convey information about documents structure or presentation.

Markup Elements are made of start tag <strong> and Also might also have closing tag </strong>.

E.G:<strong> HTML </strong>

Markup

What is Html ?Html stands for hyper Text Markup Language used widely to develop web pages over internet to publish the information.It is a basic Markup language to develop web pages over internet .Html has Well defined syntax .All documents should follow a format structure.

HTML

The World Wide Web Consortium (W3C) is the primary organization that attempts to standardizeHtml.

W3C has defined Html As an Application Of the Standard Generalized Markup Language (SGML).

SGML is the language which is used to define other languages by specifying document structure in the form of DATA TYPE DEFINITION (DTD) .

Standardization Of Html

<html><head><title>Document Title Goes Here</title>…….Head Information Goes Here</head><body>….Document content & markup go Hear</body></html>

Sample Html Code

Html Document is a simple text file saved with the (.html ) extension .

The html document is well structured and designed format as an application.

Within <html> tag Basic Structure of the document relates two primary sections the “head” & the “body”.

Detail

Contains meta-information.Search engines use meta-information to index web pages.Apart from it head element can include author contact info. , scripts , style sheets, comments and most importantly a page title.The starting <head> tag must contain closing </head> tag , because it enclose some content of the document.

The <head> Tag

Contains information about title bar at the top of the browser window .Regardless of specification variations , the <title> tag must be used in every HTML document as it gives an HTML document a title by which it is known to browsers and indexing robots.E.G :<title> Document title </title>

The <title> Tag

The body of the document is delimited by <body> and</body> .

Under the HTML 4.01 specification and many browsers, the body element is optional .

Only one body element can appear per document .

The body element delimits the document itself ,its attributes are primarily used to effect change across the entire document such as setting background images , background colors , and link , text colors .

The <body> Tag

Block level elements :<p> , <h1> these elements include line break .

Inline elements :<b> (bold) , <strong> <strong>.

Miscellaneous elements :<img> , used to render image to the document.

Browser specific elements :<marquee> , used to make the text to mobile into the browser window .

Elements of <body> tag

Easy to use, learn and implement . Do not contain any complex programming structure .Do not need any software tool or specific application to make the document , it simply use any text editor to write the coding .Almost 100% compatibility with the browser’s till now published .Important tool for the beginner’s in the web development field .

Advantages of Html

Considered as poor language for web development.Concept of dynamic web pages is ignored in this language .Hand coding makes the work tedious as compare to other web development technique.Using html interactive programming can not be done as it is not a programming language.Traditional html is going away .Html is WYSIWYG( what you see is what you get).

Disadvantages of Html

Html is not case sensitive : E.G :<b> Go boldly </b><B>Go boldly </B>Html attribute values may be case sensitive.E.G:<img SRC=“test.gif”> Is same as <img src=“test.gif”>but <img src=“test.gif”> will not be same as <img src=“TEST.GIF”>

Rules of HTML

Html is sensitive to single white space character .E.G : <b>T e s t o f S p a c e s </b> <br/>o/p = T e s t o f S p a c e s Html follows content model .E.G :<ol><li> Element 1</li></ol>Elements must have close tag unless empty.E.G :<p> This is closed </p>

Rules of HTML Cont.

A few tags such as horizontal rule <hr> or line break <br> .E.G:This isn’t closed <br>

Elements should be nested properly .E.G:<b><i>Nested tags are here <i></b>

Attribute value should be Quoted .<img src=“test.gif”>

Rules of HTML Cont.

Headings :The heading element are used to create “headlines” in documents. There are six different levels of headings Supported by html.

<h1>……….</h1> ( first heading)...<h6>………..</h6> ( sixth heading)

Core HTML

<html><head><title>Document Title Goes Here</title></head><body><h1> Heading 1 </h1><h2> Heading 2 </h2><h3> Heading 3 </h3><h4> Heading 4 </h4><h5> Heading 5 </h5><h6> Heading 6 </h6></body></html>

Sample code

<p> Tag : It generally rendered flush left, with a ragged right margin.

<br> Tag:Empty element , do no have closing tag.Used to break a line in a document.

<div> Tag:Used to divide large section of group text.

<center> Tag :To keep the alignment of text to center of web page.

Paragraph & Breaks

<pre> Tag :Stands for preformatted text.The <pre> tag can be used to indicate text that should not be formatted by the browser.It retains all spacing and returns ,It does not reflow when browser resized .Tag requires to be closed with </pre> tag .E.G:<pre> T E

A </pre>

<Pre > tag

What is URL ?Stands for uniform resource locators .It is uniform way to refer to objects and services over internet .

E.G :www.yahoo.com It’s url of yahoo website which uniquely identifies It’s services .

Linking And Images

http://www.yahoo.com/

In html the main way to define hyperlinks is with the anchor element.In hypertext end points of link typically called as anchors.For linking purpose anchor <a> tag is used which again requires href attribute .

The href attribute is set to the url of the target resource.The text enclosed within the a tag is called hotspot.

Linking And Images

E.G :<a href=“hubble.html”> Visit image </a>

Attributes for anchors :<a href=“logo.html” title=“Hubble Telescope”>Hubble Telescope </a>

Linking And Images

To insert or render the image to the html document <img> tag is used by setting it’s src attribute to the url of the image.It is an empty element , so no need to have a closing tag.

Syntax:<img src=“flower.jpg”>

The above element will render the image named flower to the document.

The <img> Tag

height :Used to set the height of the image .width :Used to set the width of the image.alt :Incase if image is not rendered properly instead of broken image it will show some message of text.Border :Used to make the border to the image .

(Note :Values of attributes above are measured in pixel unit.)

Attributes for <img> Tag

hspace :Used to create horizontal space between image and other html objects or window from both sides. vspace :Used to create vertical space between image and other html objects or window from both sides.

Eg:<img src=“image.jpg” height=“100” width=“150” alt=“robot” border=“1” hspace=“50” vspace=“50”>

Attributes for <img> Tag

In its simplest form , a table places information inside the cells formed by dividing a rectangle into rows and columns .

In markup , a table tag pair <table> …..</table>, contains an optional caption element followed by one or more rows, <tr>……</tr>.

Each row contains cells by holding a heading. <th>…..</th> or data <td>….</td>.

Tables and Layout

Attributes :width : Used to set the width of the table .height :Used to set the height of the table .cellspacing :used to set the space between two cells in a table.cellpadding :Used to set the padding between cell and wall .

Note : above attribute values are are measured in terms of pixel or percentage.

<table> Tag

rowspan and colspan attributes :

By adding rowspan and colspan attributes to the table elements , it is possible to create data cells that span a given number of rows or columns.

Widely used attribute to create interactive web pages By making the whole window as a table collection .

<table> Tag

A frame is an independent scrolling region , or window , of a web page can be divided into many individual frames , which can even be nested within other frames.

Each frame can be separated from other frame using border attribute .

Each separate frame can contain a different document, referenced by a unique URL .

Each frame can provide scrollbar and other controls to manipulate the size of the frame .

Overview of Frames

A framed document divides a browser window into multiple panes , or smaller window frames .

Frames offer many useful navigation possibilities such as a table of content , site index , and lists of link.

Frames offer fixed-screen navigation .

The lack of scrolling and minimization of screen refresh afforded by framed documents can provide great advantage over the single window approach.

Advantages of Using Frames in html

Each frame can contain different document.

It uses <frameset> tag instead of <body> tag .

The frameset element uses totally different doctype statement which refer to frameset DTD .

Major attributes for frameset element are rows and cols .

Details

<html><head><title>My Frame</title></head><frameset cols=“50,50”><frame src=“first.html” name=“parent”><frame src=“second.html” name=“child”></frameset></html> Note :the above code will divide window into two parts each of 50 pixel , in terms of columns.

Simple Frameset Example

Cols :It is used to make the partition of the window in terms of columns .Syntax :<frameset cols=“200,100”>..</frameset>Rows :It is used to make the partition of the window in terms of rows .Syntax :<frameset rows=“200,100”>..</frameset>

Attributes of <frameset>

name :Value of this attribute makes nomenclature to the individual frame .Used to target the contain of one frame in to the other frame .

Id :Works same as name attribute but id Is unique for all the frames .Used for the purpose of style sheets and scripting activities .

Attributes of <frameset>

Use the target attribute in an <a> tag to set the target for the anchor.

For example a link such as <a href=“www.yahoo.com” target=“display”>

It will load the site into the window called “display” , if such a frame exists .

If the target specified by the name doesn’t exist , the link typically loads in to a new window .

Frame Targeting

Up to now all the frames shown has been attached to the sides of the browser (left , right, top, bottom).Another form of frame is known as a floating frame but more appropriately called as inline frame .An inline frame is defined by the iframe element and can occur anywhere within the <body> of an HTML document.

Floating Frame

Syntax : <iframe src=“greet.html”></iframe>

Some of the attributes of <iframe> tag are src name Width Height vspace hspace align

Floating Frame

Frames contain numerous problem regarding design .

Problems with bookmarks.

Site navigation is confusing .

Makes webpage difficult and reserved while printing.

Problem with url context and search engine compatibility .

Tedious work for the developer to keep maintaining frame target contains .

Disadvantages of using Frames

THANK YOU

Html basic

Education

Transcript of Html basic