HTML.

World Wide Web WWW is a service internet
Introduction World Wide Web WWW is a service internet The total set of interlinked hypertext documents residing on Web servers all around the world. Documents on the WWW, called pages or Web pages WWW is based on HTML

What is Internet? A network of computer networks which operates world-wide using a common set of communications protocols.

Web Browser is a computer program which is used to view a Web page.
Browser implements the following functions: Search and access to a Web-server; Loading, formatting, and displaying HTML-document; Hyperlink detection and moving from one document to another; Standard tools support.

Hypertext Mark-up Language (HTML)
HTML is the standard mark-up language used to create and organize documents on the World Wide Web; HTML lets users to format text, add graphics, sound, video, and save it all in a Text-Only or ASCII format that any computer can read.

HTML Features Hypertext, that allows to create a link in a Web page that leads to any other pages on the Web. Hence information on the Web can be accessed from many different locations Universality means that any computer can read a Web page regardless of platforms or operating systems

HTML Files Must be saved as text files with extension html or htm. The extension tells the browser that file is to be interpreted according to HTML standards Name your files to describe their functionality File name of your home page should be index.html

Developing HTML documents
Bottom-up approach: write HTML code in a text editor, and then view the Web page in a browser Steps: Open a text editor Enter text and tags Save file as xxx.html Open the file in a browser to view the Web page Repeat above steps if you need to debug the page Top-down approach: build the Web page elements using an HTML editor, and then view the HTML code later Steps: Open an HTML editor Add HTML elements using the editor’s GUI Save the automatically generated HTML code in a file as xxx.html Exit the editor and view the page

Building Blocks HTML Building Blocks HTML tags are command words written between symbols < >, that indicate how browser should display the text. Tags may have opening and closing version Text is placed in a container (or HTML element), which starts with opening tag and ends with closing. <B> Bold text </B>

HTML Rules Case insensitive Spacing:
Browsers ignore extra spaces Block-level tags include automatic line brakes Examples: P, H1, UL, TABLE

Tag Attributes Attributes offer a variety of options
Attributes are entered between keyword and final symbol > A single tag may have a few attributes Attributes are placed one after the other in any order <IMG SRC=“Image.bmp” HSPACE=5>

Attribute Values Attributes can accept the values of particular types
Values of attributes should be enclosed in straight quotation marks “” may be omitted if the value contains only letters, digits, hyphen (-), and period (.)

Nesting Tags Hierarchy – tags that affect entire paragraph may contain tags affecting individual words or letters Order – the current closing tag should correspond to the last unclosed opening tag

Nesting Tags (example)
Correct: <H1> Information <I>System</I></H1> Incorrect: <H1> Information <I>System</H1></I>

HTML Document <HTML> <HEAD> … </HEAD> <BODY> …
Starting Web Page HTML Document <HTML> <HEAD> … </HEAD> <BODY> … </BODY> </HTML>

The HEAD Section <HEAD> - beginning of the head section
<TITLE> - page description </TITLE> - end of title  </HEAD> - end of the head section

The BODY Section <BODY> {Text displayed by browser}

Result of <TITLE> tag Result of <BODY> tag
HTML Document Result of <TITLE> tag Example HTML Document <HTML> <HEAD> <TITLE>My First Page</TITLE> </HEAD> <BODY> Welcome to NU's Students! </BODY> </HTML> Result of <BODY> tag

Commonly Used HTML Tags
Text Formatting Commonly Used HTML Tags <H1> … </H1> Heading. <H2> … </H2> Heading. <H3> … </H3> Heading. <BLOCKQUOTE> … </ BLOCKQUOTE > Indents block of text one tab.

Commonly Used HTML Tags (continued…)
<P> … </P> : Paragraph. <B> … </B> : Bold <I> … </I> : Italic <U> … </U> : Underline <EM> … </EM> : Emphasize (logical – exact effect depends on browser) <BR /> : Line break <HR /> : Horizontal Rule (line)

Creating Superscripts & Subscript
<SUB>…</SUB> : Subscript <SUP>…</SUP> : Superscript Example: H<SUB>2</SUB>O :H2O 10<SUP>th</SUP> :10th

Formatting Text With <FONT>
FONT element Add color and formatting to text FONT attributes: COLOR Preset or hex color code Value in quotation marks Note: you can set font color for whole document using TEXT attribute in BODY element

SIZE To make text larger, set SIZE = “+x” To make text smaller, set SIZE = “-x” x is the number of font point sizes N=3 corresponds to default value Value of n 1 2 3 4 5 6 7 Size in pt. 8 10 12 14 18 24 36

FACE Font of the text you are formatting Be careful to use common fonts like Times, Arial, Courier and Helvetica Browser will display default if unable to display specified font Example <FONT COLOR = “red” SIZE = “+1” FACE = “Arial”>…</FONT>

Ordered List <OL TYPE=x START=n> Beginning of an Ordered List
<LI> … </LI> A list element <LI> … </LI> Another list element </OL> End of the Ordered List TYPE, START are optional X=A, a, I, i, 1 ( X=1 is default value) n – initial value for list items

Unordered List <UL TYPE=shape > Beginning an Unordered List
<LI> … </LI> A list element <LI> … </LI> Another list element </UL> End of the Unordered List TYPE is optional, shape represents the kind of bullet, like circle, square…

Nested Lists Nested list Browsers Indent each level of a nested list
Contained in another list element Nesting the new list inside the original Indents list one level and changes the bullet type to reflect the nesting Browsers Insert a line of whitespace after every closed list Indent each level of a nested list Makes the code easier to edit and debug

Uniform Resource Locator (URL)
An address for a resource on the Internet. URL can be Absolute – contains all parts of URL; Relative – presents path and file name relatively current file. “ Scheme Server name Part File name

Scheme http – Hypertext Transfer Protocol to access Web-pages
ftp – File Transfer Protocol to download the file from the net mailto – to send electronic mail File – to access file on a local hard disk (File scheme uses ///). and others…

Absolute URL (examples)
ftp://ftp.site.com/common/prog.exe file:///Cdisk/ITEC1010/COL.html

Relative URL (examples)
A file from the same folder as current file: “file.htm” A file from a subfolder of current folder: “images/picture.gif” A file from another folder at the same hierarchical level: “../info/data.htm”

External Link is a reference to another page
<A HREF=“URL” > Label text </A> Label text will be underlined or highlighted, click upon it will bring visitors to the page with given URL

Internal link Is a reference to a particular part of the same page.
Click upon the internal link will bring a visitor to the particular part of the same page. To create an internal link: Create an anchor Add a hyperlink to the anchor

Creating Anchors Place the cursor in the desirable part of a page, where the link should bring visitors Create an anchor <A NAME=“anchor name”>Label text </A> Label text is a text or image that should be referenced.

Link to a specific anchor
Within a document <A HREF=“#anchor name”> Label text </A> To a separate document <A HREF=“URL#anchor name”>Label text </A>

Link to E-mail address <A HREF=“mailto:name@website.ext”>
Say HELLO!!!</A> Click on hypertext “Say HELLO!!!” will invoke an application such as MS Outlook to send to the address

Images <IMG SRC=“image_URL”>
SRC – source of the image (file address) Another attributes: BORDER=n, n-thickness of the border in pixels ALT – alternative text WIDTH – width of an image in pixels

Images (continued…) HEIGHT – height of an image in pixels
ALIGN – position on a page <IMG SRC=“images/pic1.bmp” WIDTH=30 HEIGHT=30 ALT=“Digimon” ALIGN=“left” >

Tables A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns. Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 Cell

Tables (continued…) Container <TABLE> … </TABLE>
Attributes: BORDER= n – the border thickness in pixels WIDTH=x – width of the table or a cell within the table in pixels (or %)

Tables (continued…) <TR>…</TR> is used
A table is formed row by row. To define a row <TR>…</TR> is used Within a row table cells with data is determined by <TD>…</TD> or with headers by <TH>…</TH>

Simple Table (example)
<HTML> <HEAD> <TITLE> Example of table </TITLE> </HEAD> <BODY> <TABLE> <TR> <TH>Month</TH> <TH>Quantity</TH> </TR> <TR> <TD>January</TD> <TD>130</TD></TR> <TR> <TD>February</TD> <TD>125</TD> </TR> <TR> <TD>March</TD> <TD>135</TD> </TR> </TABLE> </BODY> </HTML>

Tables (more complicated)
To span a cell across a few columns attribute COLSPAN=n, where n - number of columns, is used To span a cell across a few rows attribute ROWSPAN=n, where n - number of rows, is used

Table (example) <TABLE BORDER=2> <TR>
<TH> Quarter</TH><TH>Month</TH><TH>Quantity</TH> </TR> <TR> <TD ROWSPAN=3> I </TD> <TD>January</TD> <TD>130</TD> </TR> <TR> <TD>February</TD> <TD>125</TD> </TR> <TD>March</TD><TD>135</TD>

Table (example continued…)
<TR> <TD ROWSPAN=3> II </TD> <TD>April</TD> <TD>130</TD> </TR> <TR> <TD>May</TD><TD>125</TD> </TR> <TR> <TD>June</TD><TD>135</TD> </TR> <TR> <TD COLSPAN=2> Total </TD> <TD>780</TD> </TABLE>

Cell Attributes FONT – establishes the font of a cell
ALIGN – determines horizontal alignment of cell content, accepts values: “left”, “center”, or “right” VALIGN - determines vertical alignment of cell content, accepts values: “top”, “middle”, or “bottom”

Purposes to use tables To present tabular data;
To create multicolumn text To create captions for images To create side bars Cells may contain various HTML elements: Images, Hyperlinks, Text, Objects, even Tables

Frame A frame is an independent scrolling region, or window, of a Web page. Every Web page can be divided into many individual frames, which can even be nested within other frames Each frame can contain a different document.

Create Frameset To create a frameset with three horizontal rows all in the same column <frameset rows=“a,b,*”> <frame src=“URL” name=“name”> </frameset Note: The BODY tag is not used at all in frameset pages

Create Frameset (continued…)
Frameset Attribute rows=“a,b,*” where a and b are the height of the first & second rows and asterisk is the height of the third row. The value may either be a percentage or exact number of pixels Frame Attribute name=“name” where name is word that identifies this particular frame’s use. src=“URL” where path of url for the page that will be displayed in the this frame.

Creating frame in column
To create frames in columns <frameset cols=“a,b,*”> <frame src=“URL” name=“name”> </frameset> Frameset Attribute cols=“a,b,*” where a and b are the width of the first & second rows and asterisk is the width of the third row. The value may either be a percentage or exact number of pixels

Creating frames in Rows and Columns
To create a frameset with both rows and columns <frameset cols=“a,b” rows=“a,b”> <frame src=“URL” name=“name”> </frameset> Note: Defining rows and columns in this way limits you to the same number of frames in each row or column

Combining Framesets To combine Framesets <frameset rows=“a,b”>
<frame src=“url” name=“name”> <frameset cols=“a,b”> </frameset>

Adjusting a Frame’s Margins
To adjust a frame’s margins In the desired FRAME tag, Type MARGINWIDTH=W where w is the desired amount of space, in pixel, between the left and the right edges of the frame. Type MARGINHEIGHT=H where H is the desired amount of space, in pixel, between the top and the bottom edges of the frame.

Showing or Hiding Scroll Bars
In the FRAME tag of the particular frame, type scrolling=“yes, no, auto” Scrolling value yes for showing scroll bar no for hiding scroll bar auto for scroll bars to appear only when necessary.

Adjusting the color of the Borders
To adjust the color of all the borders in the framesets Inside the topmost FRAMESET tag, type BORDERCOLOR=color

Adjusting Frame Borders
To adjust amount of space between frames Inside the topmost FRAMESET tag, type BORDER=n where n is the width of the space between frames in pixels To show or hide borders Inside the FRAMESET or FRAME, type FRAMEBORDER=“1, yes , 0, no”

Keeping Visitors from Resizing Frames
To keep visitors from resizing your frames, type NORESIZE in the FRAME tag for desire frame

Creating Links Between Frames
To target a link to a particular frame Make sure the target frame has a name On the page where the link appear, type <a href=“Hello.htm” target=“name”>I want to say…</a> Target=“name” where name is the reference given to the target frame within the frame tag.

Creating Links Between Frames (continued…)
To target a link to a special spot Type < a href=“detail.htm” Type target=“_blank” to open the link in the new window, blank window Or type target=“_self” to open the link in the same frame that contains the link Or type target=“_top” to open the link in the current browser window. Or type target=“_parent” to open the link in the frame that contains the current frameset. </a>

Creating Links Between Frames (continued…)
To change the default target In the HEAD section of the page that contains the links, <base target=“name” , where name is the word that identifies the frame in which you want the links to appear, by default >

Creating Alternatives to Frames
To create alternatives to frames Type <noframe> before the last </frameset> tag Create the content that you want to appear if the frames do not </noframe>

Creating an Inline Frame
To create an inline frame In the container page, type <iframe src=“frame.url” name=“name” width=“x” height=“y” align=“direction”> Type the text that should appear if the browser doesn’t support </iframe>

Basic HTML Forms Forms FORM element
Collect information from people viewing your site FORM element METHOD attribute Form data can be sent to the server in two ways The get method, which sends data as part of the URL The post method, which hides data in the HTTP headers ACTION attribute The action attribute indicates which page on the server will receive the information from this form when a user presses the submit button.

Basic HTML Forms (Cont)
ID Attribute The id attribute allows you to provide a unique identifier for the <form> element, just as it does for other elements. Name Attribute As with most other attributes, the name attribute is the predecessor to the id attribute.

Form Controls This section covers the different types of form controls that you can use to collect data from a visitor to your site. You will see: Text input controls Buttons Checkboxes and radio buttons Select boxes (sometimes referred to as drop-down menus) and list boxes File select boxes Hidden controls

Text input controls There are actually three types of text input used on forms: Single-line text input controls Password input controls: Multi-line text input controls:

Single-line text input controls
Single-line text input controls are created using an <input> element whose type attribute has a value of text Attribute Purpose type Indicates the type of input control you want to create. name Used to give the name part of the name/value pair that is sent to a server. value Provides an initial value for the text input control that the user will see when the form loads. size Allows you to specify the width of the text-input control. maxlength Allows you to specify the maximum number of characters a user can enter into the text box.

Password Input Controls
Password input controls are created almost identically to the single-line text input controls, except that the type attribute on the <input> element is given a value of password. Example: <form action=" method="post"> Username: <input type="text" name="txtUsername" value="" size="20" maxlength="20"> <br> Password: <input type="password" name="pwdPassword" value="" size="20" maxlength="20“> <input type="submit" value="Submit"> </form>

Multiple-Line Text Input Controls
Allowing a visitor to your site to enter more than one line of text, you should create a multiple-line text input control using the <textarea>…</textarea> element. Attribute Purpose name Used to give the name part of the name/value pair that is sent to a server. rows it indicates the number of rows of text a <textarea> element cols It specifies the width of the box and refers to the number of columns. One column is the average width of a character.

Multiple-Line Text Input Controls (Cont)
Attribute Values Wrap allows you to Indicate how the text should be wrapped. Selecting Off or Default prevents text from wrapping to the next line. Selecting Virtual sets word wrap in the text area. When the user’s input exceeds the right boundary of the text area, text wraps to the next line. Selecting Physical sets word wrap in the text area, as well as to the data when it is submitted for processing.

Button Controls You can create a button in three ways:
Using an <input> element with a type attribute whose value is submit, reset, or button Using an <input> element with a type attribute whose value is image Using a <button> element

Button Controls Creating Buttons Using the <input> Element
The type attribute can take the following values: submit, which creates a button that automatically submits a form reset, which creates a button that automatically resets form controls to their initial values button, which creates a button that is used to trigger a client-side script when the user clicks that button The name attribute provides a name for the button. The value attribute enables you to specify what the text on the button should read.

Button Controls Using Images for Buttons
Creating an image button is very similar to creating any other button, but the type attribute has a value of image Attribute Purpose src Specifies the source of the image file. alt Provides alternative text for the image.

Button Controls Creating Buttons Using the <button> Element
Allowing you to specify what appears on a button between an opening <button> tag and a closing </button> tag. You can include image elements between these tags. The type attribute can take the following values: submit, which creates a button that automatically submits a form reset, which creates a button that automatically resets form controls to their initial values button, which creates a button that is used to trigger a client-side script when the user clicks that button

Checkbox & Radio INPUT element TYPE = “checkbox” creates a checkbox
Used individually or in groups Each checkbox in a group should have same NAME Make sure that the checkboxes within a group have different VALUE attribute values TYPE = “radio” Radio buttons similar in function and usage to checkboxes Only one radio button in a group can be selected

Checkbox & Radio (Cont)
Attribute Purpose type Indicates that you want to create a checkbox or radio. name Gives the name of the control value The value that will be used if the checkbox is selected checked Indicates that when the page loads, the checkbox or radio should be selected. size This attribute indicates the size of the radio button in pixels, but this attribute does not work in IE 6 or Netscape 7.

Select Boxes SELECT element Add an item to list
Insert an OPTION element in the <SELECT>…</SELECT> tags Example <select name="selColor"> <option selected="selected" value="">Select color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>

Select Boxes SELECT Element Attribute Purpose name
This is the name for the control. size This can be used to present a scrolling list box (list box control) multiple Allows a user to select multiple items from the menu. OPTION Element Attribute Purpose value The value that is sent to the server if this option is selected. selected Specifies that this option should be the initially selected value when the page loads.

Grouping Options The <optgroup> element can carry a label attribute whose value is a label for that group of options. <form action=" method="get" name="frmInfo"> Please select the product you are interested in:<br> <select name="selInformation"> <optgroup label="Hardware"> <option value="Desktop">Desktop computers</option> <option value="Laptop">Laptop computers</option> </optgroup> <optgroup label="Peripherals"> <option value="InputDevices">Input Devices</option> <option value="Storage">Storage</option> </select> <br><br><input type="submit" value="Submit"> </form>

File Select Boxes INPUT element TYPE = “file” creates a file upload
NAME=“name” is the name for the control When you are using a file upload box, the method attribute of the <form> element must be post.

Hidden Controls You create a hidden control using the <input> element whose type attribute has a value of hidden. hidden control must carry name and value attributes. <form action=" method="get" name="fromVote"> <input type="hidden" name="hidPageSentFrom" value="home page"> <input type="submit" value="Click if this is your favorite page of our site."> </form>

Creating Labels for Controls and the <label> Element
Use the <label> tag to define relationships between a form control, such as a text input field. Labels get associated with a form control in one of two ways: implicitly by including the form control as contents of the label tag explicitly by naming the ID of the target form control in the <label> tag's FOR attribute. <form action=" method="post" name="frmLogin"> <table> <tr> <td><label for="Uname">User name</label></td> <td><input type="text" id="Uname" name="txtUserName"></td> </tr> </table> </form>

Structuring Your Forms with <fieldset> and <legend> Elements
The <fieldset> element creates a border around the group of form controls to show that they are related. The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls. When used, the <legend> element should always be the first child of the <fieldset> element.

Structuring Your Forms with <fieldset> and <legend> Elements
<form action=" method="post“ name="frmComp"> <fieldset> <legend>Contact Information</legend> <label>First name: <input type="text" name="txtFName“ size="20"> </label> <br> <label>Last name: <input type="text" name="txtLName“ size="20"> <label> <input type="text" name="txt “ size="20"></label> </fieldset>

Tabbing Order If you want to control the order in which elements can gain focus you can use the tabindex attribute to give that element a number between 0 and 32767, which forms part of the tabbing order. The following elements can carry a tabindex attribute: <a> <area> <button> <input> <object> <select> <textarea> <form action=" method="get" name="frmTabExample"> <input type="checkbox" name="chkNumber" value="1" tabindex="1"> One<br> <input type="checkbox" name="chkNumber" value="2" tabindex="2"> Two<br> <input type="checkbox" name="chkNumber" value="3" tabindex="3"> Three<br> <input type="checkbox" name="chkNumber" value="4" tabindex="4"> Four<br> <input type="checkbox" name="chkNumber" value="5" tabindex="5"> Five<br> <input type="submit" value="Submit"> </form>

Access Keys The access key is defined using the accesskey attribute. The value of this attribute is the character. The following elements can carry an access key attribute: <a> <area> <button> <input> <label> <legend> <textarea> <form action=" method="get“ name="frmTabExample"> <input type="checkbox" name="chkNumber" tabindex="1" accesskey=“O”> One<br> <input type="checkbox" name="chkNumber" value="2" tabindex="2“ accesskey=“T”> Two </form>

Disabled and Read-Only
The readonly attribute prevents users from changing the value of the form control The disabled attribute disables the form control so that users cannot alter it. The following table indicates which form controls work with the readonly and disabled attributes. Element readonly disabled <textarea> Yes <input type=”text”> <input type=”checkbox” > No <input type=”radio”> <input type=”submit” > <input type=”reset”> <input type=”button”> <select> <option> <button>

Multimedia Linking to Multimedia Files
Type <a href="multimedia.ext">, where multimedia.ext is the location, name, and extension of the multimedia file. Type the text or insert an image that the visitor will click on to activate the link. Type </a> to complete the link. Example <a href=“sovat.mp3”>Preap Sowat</a>

Multimedia Embedding Windows Media
<object classid="CLSID:6BF52A52-394A-11d3-B153- 00C04F79FAA6" width="320“ height="305"> <param name="URL" value="pond.wmv"> <param name="autoStart" value="true"> <param name=“uiMode" value=“none"> <embed width="320" height="305“ src="pond.wmv" loop="false" autostart="true”> </embed> </object>

Multimedia Embedding Flash
<object classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="flash1" name="flash1“ width="320" height="240"> <param name="movie" value="button1.swf" > <param name="quality" value="high" > <embed src="test.swf“ id="flash1" name="flash1“ width="320" height="240“ quality="autohigh" bgcolor="#ffffff" type="application/x-shockwave-flash" pluginspage=" <noembed> <img src="test.gif" alt="" height="250" width="320" ></noembed> </embed> </object>

Creating and Using Image Maps

To use the image map with an IMG element Insert the USEMAP = “#name” attribute into the IMG element name - value of the NAME attribute in the MAP element Example. <IMG SRC = "deitel.gif" WIDTH = "200" HEIGHT="144" BORDER="1" ALT = "Harvey and Paul Deitel" USEMAP = "#picture"> <map name=“picture" id=“picture"> <area shape="rect" coords="6,50,140,143" href="rectangle.html" alt="rectangle"> <area shape="circle" coords="195,100,50" href="circle.html" alt="circle"> </map>

Designate certain sections of an image as hotspots Use hotspots as anchors for linking All elements of image map inside <MAP>…</MAP> tags <MAP> tag requires NAME attribute Ex. <MAP NAME = “picture”> Hotspots designated with AREA element AREA attributes: HREF sets the target for the link on that spot SHAPE and COORDS set the characteristics of the AREA ALT provides alternate textual description

AREA element (continued) SHAPE = “rect” Causes rectangular hotspot to be drawn around the coordinates given in the COORDS attribute COORDS - pairs of numbers corresponding to the x and y axes x axis extends horizontally from upper-left corner y axis extends vertically from upper-left corner Ex. <AREA HREF = “form.html” SHAPE = “rect” COORDS = “3, 122, 73, 143” ALT = “Go to the form”> Rectangular hotspot with upper-left corner of rectangle at (3, 122) and lower-right corner at (73, 143)

AREA element (continued) SHAPE = “poly” Causes a hotspot to be created around specified coordinates Ex. <AREA HREF = SHAPE = “poly” COORDS = “28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13” ALT = “ the Deitels”> SHAPE = “circle” Creates a circular hotspot Coordinates of center of circle and radius of circle, in pixels Ex. <AREA HREF = SHAPE = “circle” COORDS = “146, 66, 42” ALT = “ the Deitels”>

Creates a scrolling text marquee
<marquee>text</marquee> Marquee attribute align = top | middle | bottom behavior = alternate | scroll | side bgcolor = color direction = down \ left \ up \ right height = number; width = number loop = number scrollamount = number (Specifies the number of pixels moved each time the text scrolls) scrolldelay = number (delay in milliseconds between each movements of the scroll)

<META> Tags Meta data refers to data that is not part of the content of an HTML document Meta data describes Web pages to search engines. Search engines use meta data to index and rank page hits in a given search The <META> tag declares meta data. It must be used in the <HEAD> section. Example: <META NAME = “description” CONTENT = “Everything you would want to know about using HTML”> <META NAME = “keywords” CONTENT = “HTML 4.0, tags, attributes, editors”>

<META> Tags META tags
Contain two attributes that should always be used: NAME identifies type of META tag CONTENT provides info the search engine will catalog about your site CONTENT of a META tag with NAME = “keywords” Provides search engines with a list of words that describe key aspects of your site CONTENT of a META tag with NAME = “description” Should be 3 to 4 lines Used by search engines to catalog and display your site

Thank you for your attention!

HTML.

Similar presentations

Presentation on theme: "HTML."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML.

Similar presentations

Presentation on theme: "HTML."— Presentation transcript:

Similar presentations

About project

Feedback