Category: Entertainment

Presentation Description

No description available.


Presentation Transcript


HTML HTML stands for H yper T ext M arkup L anguage HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

Tags, Attributes, and Elements :

Tags, Attributes, and Elements The basic structure of an HTML document includes tags , which surround content and apply meaning to it. HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <h1> and </h1> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

Tags, Attributes, and Elements :

Tags, Attributes, and Elements Tags <html> <head> <title>web technology</title> </head> <body> Welcome to my web page </body> </html>

Tags, Attributes, and Elements :

Tags, Attributes, and Elements Attributes Tags can also have attributes , which are extra bits of information. Attributes appear inside the opening tag and their their value is always inside quotation marks . They look something like <tag attribute="value">text</tag>. <html> <head> <title>web technology</title> </head> <body bgcolor ="yellow" text="red"> Formatting my web page <font face="comic sans MS" color="blue" size="4"><b>changing the font</b></font> </body> </html>

Tags, Attributes, and Elements :

Tags, Attributes, and Elements Elements Tags tend not to do much more than mark the beginning and end of an element . Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. Example <title>Rumple Stiltskin</title>' is a title element .

<html> Element...</html> :

<html> Element...</html> <html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. One should close our HTML documents with the corresponding </html> tag at the bottom of the document.

Paragraphs :

Paragraphs If we want text to appear on different lines, we need to explicitly state that. The p tag is for paragraph . <p>This is my first web page</p> <p>How exciting</p>

Emphasis :

Emphasis You can emphasise text in a paragraph using em (emphasis) and strong (strong emphasis). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.

Line breaks :

Line breaks The line-break tag can also be used to separate lines . If we want more than one line breaks instead of the paragraph tag we should use the line break tag. Example: <br><br>break tag can give more than one line break while paragraph tag can provide only one

Headings :

Headings If we have documents with genuine headings , then there are HTML tags specifically designed just for them. They are h1 , h2 , h3 , h4 , h5 and h6 ,

Headings example:

Headings example <html> <head> <title>web technology</title> </head> <body> <h1>Introduction</h1> <h2>HTML</h2 > <h3>DHTML</h3> <h4>XHTML</h4> </h5> VBscript </h5> <h6>JavaScript</h6> <h7>ASP</h7> </body> </html>

Drawing Lines:

Drawing Lines The tag <hr> draws lines and horizontal rules. The attributes of <hr> tag are:- Align :Aligns line on the browser screen which is by default aligned to the center. Align=“left” :will align the line to the left of screen Align=“right” :will align the line to the right of screen Align=“ center “ :will align the line to the center of screen Size:Changes the size of the rule. Width:Sets the width of the rule to a percentage of available screen width.

Text Styles:

Text Styles Bold:-Displays text in bold face style.The tags used are <b>…</b> Italics:-Displays text in italics.The tags used are between <I>…</I> Underline:-Displays text as underlined.The tags used are between <U>….</U> Example:<B><I><U>Welcome to our home page </U></I></B>

Text Effects:

Text Effects Font tag:-All text specified within the tags <font> and </font> will appear in the font ,size and color as specified as the attributes of the tag <font>. Attributes Face:Sets the font to the specified font name. Size:Sets the size of the text.(range 1 to 7) Color:Sets the color of the text Example: <font face=“comic sans MS” size=“6” color=“red”>Welcome to our home page</font>

Lists :

Lists There are three types of list; unordered lists ordered lists definition lists .

Unordered Lists:

Unordered Lists An unordered list or bulleted list starts with the tag <UL> and </UL> Each list item starts with the tag <LI> The attributes with the tag<UL> are:- Type=“fillround” Type=“square”

Example UL list:

Example UL list <ul type=“fillround”>types of memories</ul> <li>floppy <li>hard disk <li>CDROM </ul>

Ordered lists:

Ordered lists Ordered lists or lists with numbering starts with <OL> and ends with </OL> Attributes Type=“1”:will give counting numbers(1,2……) Type=“A” will give uppercase letters(A,B,C….) Type=“a” will give lowercase letters(a,b,c….) Type=“I”:will give uppercase roman numerals Type=“I”:will give lowercase roman numerals

Definition list:

Definition list The <dl> tag defines a description list. The <dl> tag is used in conjunction with < dt > (definition term) and < dd > (definition description)

PowerPoint Presentation:

<dl>   < dt >Coffee</ dt >     < dd >Black hot drink</ dd >   < dt >Milk</ dt >     < dd >White cold drink</ dd > </dl>


Div The <div> tag acts as a container for the other tags. The div element can contain any type of HTML tags. They structure the HTML document using unique divisions that can be identified with unique ids.


Example <html> <head> <title>Delta engineering company</title> <h1 align =center>Delta Engineering company pvt ltd</h1> </head> <body bgcolor ="yellow" > <hr align=left width=100% size=5 color=violet> <div> <p> IDENTIFY METRICS CUSTOMERS </p> <p> Functional Management: Interested in applying greater control to the software development process, reducing risk and maximizing return on investment. </p> </div></body></html>


Span The  HTML <span> element  is a generic inline container for structuring content. It can be used to group elements for styling purposes (using the class or id attributes), <span> is very much like a  <div>  element, but  <div>  is a block-level element whereas a <span> is an inline element.

PowerPoint Presentation:

<html> <head> <title>Delta engineering company</title> <h1 align =center>Delta Engineering company pvt ltd</h1> </head> <body bgcolor ="yellow" > <hr align=left width=100% size=5 color=violet> <div> <p> IDENTIFY METRICS CUSTOMERS </p> <p> Functional Management: </p></div> <div>Interested in applying greater control to the<span> software development process</span>, reducing risk and <span>maximizing return on investment.</span></div></body></html>

PowerPoint Presentation:

Div Tag Block level element It creates a line break. A <div> tag can contain several <p> element but a <p> tag cannot contain div element. Span Tag Inline element It does not create a visual difference. A <span> tag cannot contain <p> tags.A <p> element can contain several span elements.

Attributes supported by <div> and <span> tags:

Attributes supported by <div> and <span> tags Id class Align Bgcolor Width Height Title Style

Meta Tag:

Meta Tag Metadata means data which is stored about data. Metadata help search engines in finding a match when it performs the search. The search engines will look at any meta data attached to a page. We can add metadata to our web pages by placing meta tags within the <head> tags.

Attributes of the meta tag:

Attributes of the meta tag Name Content Scheme http-equiv

NAME attributes:

NAME attributes META tags with a name attribute are used for the types which do not correspond to HTTP headers. Value Robots:Controls Web robots on a per-page basis <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"> NOINDEX prevents anything on the page from being indexed. NOFOLLOW prevents the crawler from following the links on the page and indexing the linked pages. NOIMAGEINDEX prevents the images on the page from being indexed but the text on the page can still be indexed. NOIMAGECLICK prevents the use of links directly to the images, instead there will only be a link to the page.

Name attribute:

Name attribute Description: A short, plain language description of the document. Used by search engines to describe your document. <META NAME="description" CONTENT="Citrus fruit wholesaler.">

Name attribute:

Name attribute Keywords :Keywords used by search engines to index your document in addition to words from the title and document body. Typically used for synonyms and alternates of title words. E.g. <META NAME="keywords" CONTENT="oranges, lemons, limes">

HTTP-EQUIV attribute :

HTTP-EQUIV attribute META tags with an HTTP-EQUIV attribute are equivalent to HTTP headers. Typically, they control the action of browsers, may be used to refine the information provided by the actual headers

HTTP-EQUIV attribute cont :

HTTP-EQUIV attribute cont Expires:The date and time after which the document should be considered expired. Dates must be given in in GMT. <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> Content- Type: The HTTP content type may be extended to give the character set. As a META tag, it causes Netscape Navigator to load the appropriate charset before displaying the page. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset =ISO-2022-JP"> It is now recommended to always use this tag,Failure to do so may cause display problems

HTTP-EQUIV attribute cont :

HTTP-EQUIV attribute cont Content-Script- Type: Specifies the default scripting language in a document. <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/ javascript "> Content- Language: May be used to declare the natural language of the document. languages are specified as the pair (language-dialect); here, English-British <META HTTP-EQUIV="Content- Language " CONTENT="en-GB">

PowerPoint Presentation:

Refresh: Specifies a delay in seconds before the browser automatically reloads the document. Optionally, specifies an alternative URL to load. E.g. <META HTTP-EQUIV="Refresh" CONTENT="3;URL=">

Working with Tables:

Working with Tables


Objectives Understand table basics Format tables Follow table pointers to create well-designed tables Create a page template Evaluate examples of page templates

Understanding Table Basics:

Understanding Table Basics

Using Table Elements:

Using Table Elements To build effective page templates, you must be familiar with the HTML table elements and attributes The <table> element contains the table information, which consists of table row elements <tr> and individual table data cells <td> These are the three elements you will use most frequently when you are building tables

Basic Table Code:

Basic Table Code <table border="1"> < tr ><td>Breed</td><td>Description</td><td>Group</td> </ tr > < tr ><td>French Bulldog</td><td>Loyal Companion</td> <td>Non-Sporting</td></ tr > < tr ><td>Wheaten Terrier</td><td>High energy, friendly</td> <td>Terrier</td></ tr > < tr ><td>English Pointer</td><td>Hunting companion</td> <td>Sporting</td></ tr > < tr ><td>Australian Cattle Dog</td><td>Guarding, herding</td> <td>Working</td></ tr > </table>

Captions and Table Header:

Captions and Table Header <caption> lets you add a caption to the top or bottom of the table By default, captions display at the top of the table; you can use the align=“bottom” attribute to align the caption at the bottom of the table The <th> tag lets you create a table header cell that presents the cell content as bold and centered

Global attributes of table tag:

Global attributes of table tag ATTRIBUTES DESCRIPTION BGCOLOR Sets the background color of the table ALIGN Indicates the position of the table on the web page Left/Right/Center BORDER Indicates the thickness of the table. HEIGHT Indicates the height of the Table in pixels WIDTH Indicates the width of the Table in pixels BORDERCOLOR Specifies the color for the table border. Cell spacing Indicates the distance between edges of the cells Cell Padding Indicates the distance between edges of cells and contents.

Table Grouping Attributes:

Table Grouping Attributes The primary use of the grouping elements is to let you apply styles to groups of either rows or columns

Headers and Footers :

Headers and Footers thead ,  tfoot  and  tbody  allow you to separate the table into  header ,  footer  and  body , which can be handy when dealing with larger tables.

PowerPoint Presentation:

<html> <body> <table border="6" bordercolor ="blue" bgcolor ="pink" cellpadding ="20" cellspacing ="8"> < thead > <td>Roll</td> <td>Name</td> <td>Percentage</td> </ thead > < tfoot > <td>Today</td> <td>is</td> <td> wednesday </td> </ tfoot > < tbody > < tr > <td>101</td> <td> sagar </td> <td>85.5%</td> </ tr > < tr > <td>102</td> <td> Rekha </td> <td>90.0%</td> </ tr > < tr > <td>103</td> <td>Tina</td> <td>56%</td> </ tr > </ tbody > </table> </body> </html>

Formatting columns:

Formatting columns the  colgroup  and  col  tags have come to their used to format columns. These tags allow you to define the table columns and style them as desired, which is particularly useful if you want certain columns aligned or colored differently, as, without this, you would need to target individual cells.

Colgroup tag:

Colgroup tag The < colgroup > tag specifies a group of one or more columns in a table for formatting. The < colgroup > tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.  The < colgroup > tag must be a child of a <table> element, after any <caption> elements and before any < thead >, < tbody >, < tfoot >, and < tr > elements. To define different properties to a column within a < colgroup >, use the  < col >  tag within the < colgroup > tag.

PowerPoint Presentation:

<html> <body> <table border="6" bordercolor ="blue" bgcolor ="pink" cellpadding ="20" cellspacing ="8"> < colgroup > < col span=“2” style="background- color:red "> < col style="background- color:yellow ">> < thead > <td>Roll</td> <td>Name</td> <td>Percentage</td> </ thead > < tfoot > <td>Today</td> <td>is</td> <td> wednesday </td> </ tfoot > < tbody > < tr > <td>102</td> <td> Rekha </td> <td>90.0%</td> </ tr > </ tbody > </table> </body> </html>

Defining Table Attributes:

Defining Table Attributes Table attributes let you further define a number of table characteristics You can apply attributes at three levels of table structure: global, row level, or cell level

PowerPoint Presentation:

Global Table Attributes Global attributes affect the entire table

PowerPoint Presentation:

Row-Level Table Attributes Row-level attributes affect the entire table

PowerPoint Presentation:

Cell-Level Table Attributes Cell-level attributes affect only the contents of one cell

Spanning Columns:

Spanning Columns The colspan attribute lets you create cells that span multiple columns of a table Column cells always span to the right

Spanning Rows:

Spanning Rows The rowspan attribute lets you create cells that span multiple rows of a table Rows always span down

Formatting Tables :

Formatting Tables

Choosing Relative or Fixed Table Widths:

Choosing Relative or Fixed Table Widths Set relative table widths as percentages in the table width attribute If you choose relative table widths, your tables will resize based on the size of the browser window Set absolute table widths as pixel values in the table width attribute Fixed tables remain constant regardless of the browser window size

Determining the Correct Fixed Width for a Table:

Determining the Correct Fixed Width for a Table The most common width for page template tables is approximately 975 pixels This width supports the 1024 x 768 screen resolution

Adding White Space in a Table:

Adding White Space in a Table You can add white space into a table with the cellpadding and cellspacing attributes

Removing Default Table Spacing:

Removing Default Table Spacing Default spacing values are included in the table even when you don’t specify values for the table’s border, cellpadding, or cellspacing attributes Depending on the browser, approximately two pixels are reserved for each of these values You can remove the default spacing by explicitly stating a zero value for each attribute

Image tag:

Image tag Html embeds images in your web page using the < img > tag. Image exists in different file formats:- JPEG :Join photographic experts group BMP:bitmap PNG:portable network graphics TIFF:Tagged Image File Format

Attributes of <img> tag:

Attributes of < img > tag Attribute Description Vspace Indicates the amount of space left to the top and the bottom of the image. Hspace Indicates the amount of space left to the left and the right of the image. Alt Will display alternate text when the image is not found. Src Indicates the source file. Border Specify the size of the border around the image. Height and width Indicates the dimension of the image in pixels. Align Controls the horizontal alignment of the image. Valign Controls the vertical alignment of the image.

PowerPoint Presentation:

LONGDESC--Points to a resource that contains a longer description of the image’s content. ISMAP--Identifies the image as being used as part of a server-side imagemap . USEMAP--Set equal to the name of the client-side imagemap to be used with the image.

Img tag:

Img tag <html> <head> </head> <body> The koala( Phascolarctos cinereus ) is an arboreal herbivorous marsupial native to Australia, and the only extant representative of the family Phascolarctidae . It is classified in the suborder Vombatiformes within the order Diprotodontia , and its closest living relatives are the wombats. < br > < img src ="Koala.jpg" border="4" align="right" valign ="bottom" height="400" width="500" vspace ="100" hspace ="50" longDesc ="koala.html"> <script> Document.write ( Document.longDesc ); </script></body> </html>

Align =“left”:

Align =“left”



Image with border:

Image with border

Inserting links:

Inserting links The main purpose of web page is to create the documents that navigate in any order. Hypertext document is a document which links to the other documents through hyperlinks. The browser distinguishes the hyperlinks from normal text. The hyperlink appears blue in color. Hyperlink is underlined. When the mouse cursor moves over the hyperlink ,it changes to the shape of a hand.

Hyperlink types:

Hyperlink types There are three types of hyperlinks:- Internal: Links to anchors in the current page. It is necessary to mark the location with the help of <a> tag using name attribute. Then link with the help of href attribute followed by # symbol. <a href =“#top”>

PowerPoint Presentation:

<html> <head> <title>Delta engineering company</title> <h1 align =center>Delta Engineering company pvt ltd</h1> </head> <body bgcolor ="yellow" > <hr align=left width=100% size=5 color=violet> <div> <p> <a name="top">IDENTIFY METRICS CUSTOMERS </p> <p> Functional Management: </p></div> <a href ="#top">top</a> </body></html>


Local Links to the other pages within your domain or web site. <html> <body> <a href ="list.html">link to a list</a> < br > <a href ="frame.html">link to a frame</a> < br > <a href ="img.html">link to an image</a> </body> </html>

Global links:

Global links Links to domains outside your web site. <html> <body> <a href ="list.html">link to a list</a> < br > <a href ="frame.html">link to a frame</a> < br > <a href ="img.html">link to an image</a> < br > <a href ="">link to Google</a> </body> </html>

Attributes of the body tag to change the default color of the hyperlink:

Attributes of the body tag to change the default color of the hyperlink Link :Changes the default color of the hyperlink Alink:Changes the default color of the active hyperlink. Vlink:Changes the default color of the visited hyperlink.

Anchor tag:

Anchor tag The <a> tag can be used in two ways: To create a link to another document, by using the href attribute To create a bookmark inside a document, by using the name attribute

HTML Links - The target Attribute :

HTML Links - The target Attribute The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab: <a href =" " target="_blank">Visit mumbaiuniversity </a>


Target Value Description _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window framename Opens the linked document in a named frame

Attribute of <A >tag:

Attribute of <A >tag ACCESSKEY--An access key is a shortcut key a reader can use to activate the hyperlink. If you set the access key to the letter "C", for example, Windows users can press shift + Alt+C on their keyboards to activate the link. CHARSET--Denotes what character encoding to use for the linked document.

PowerPoint Presentation:

HREF--Gives the URL of the Web resource to which the hyperlink should point. HREFLANG--Denotes the language context of the linked resource. NAME--Specifies the name of the anchor being set up.

PowerPoint Presentation:

<html> <body link="red" alink ="green" vlink ="cyan"> <a href ="list.html" target="_blank" accesskey ="A">link to a list</a> < br > <a href ="frame.html" accesskey ="B">link to a frame</a> < br > <a href ="img.html" accesskey ="C">link to an image</a> < br > <a href ="">link to Google</a> < br > <a href ="html1.html" > < img src ="koala.jpg"></a> </body> </html>

REL--Describes the nature of the forward link. :

REL--Describes the nature of the forward link. Value Description alternate Links to an alternate version of the document (i.e. print page, translated or mirror) author Links to the author of the document bookmark Permanent URL used for bookmarking help Links to a help document license Links to copyright information for the document next The next document in a selection nofollow Links to an unendorsed document, like a paid link. (" nofollow " is used by Google, to specify that the Google search spider should not follow that link) noreferrer Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink prev The previous document in a selection

PowerPoint Presentation:

<html> <head> <title>Write title of document.</title> </head> <body> <p> rel  attribute of anchor tag in HTML5.</p> <a  rel =" nofollow "  href ="" > Do not follow this link.</a>< br > <a  rel ="alternate"  href =“ass1.html"  hreflang ="en">English version of document</a>< br > <a  rel ="next"  href =“frame.html">Open previous document</a>< br > <a  rel =" prev "  href =“img.html">Open next document</a>< br > </body>  </html>

PowerPoint Presentation:

TABINDEX--Specifies the link's position in the document's tabbing order. TARGET--Tells the browser into which frame the linked document should be loaded.

authorStream Live Help