intro to html
DESCRIPTION
Basic concept of HTMLTRANSCRIPT
![Page 1: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/1.jpg)
Intro to HTML
The Basics
![Page 2: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/2.jpg)
HTML
HTML means Hyper Text Markup Language. HTML is a language that helps us to create web sites in the Internet. HTML helps to coordinate human and the computer. So we have to use some codes to explain to computer what are we going to do. Therefore we use HTML to give instructions to create web sites.
![Page 3: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/3.jpg)
Why We Learn HTML?
![Page 4: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/4.jpg)
Tim Berners-Lee (CERN physicist)
Creator of HTML & WWW
CERN is an European Organization for Nuclear
Research at Geneva
![Page 5: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/5.jpg)
• HTML is an evolving standard (as new HTML is an evolving standard (as new technology/tools are added) technology/tools are added)
HTML 1 (Sir Tim Berners-Lee, 1989): very basic, HTML 1 (Sir Tim Berners-Lee, 1989): very basic, limited integration of multimedialimited integration of multimedia
in 1993, Mosaic added many new features (e.g., integrated in 1993, Mosaic added many new features (e.g., integrated images) images)
HTML 2.0 (IETF, 1994): tried to standardize these & HTML 2.0 (IETF, 1994): tried to standardize these & other features, but lateother features, but late
in 1994-96, Netscape & IE added many new, divergent in 1994-96, Netscape & IE added many new, divergent features features
HTML 3.2 (W3C, 1996): attempted to unify into a HTML 3.2 (W3C, 1996): attempted to unify into a single standardsingle standard
but didn't address newer technologies like Java applets & but didn't address newer technologies like Java applets & streaming videostreaming video
Beginning of HTMLBeginning of HTML
![Page 6: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/6.jpg)
Beginning of HTML (cont.)Beginning of HTML (cont.) HTML 4.0 (W3C, 1997): current standard (but moving HTML 4.0 (W3C, 1997): current standard (but moving
towards XHTML)towards XHTML) attempted to map out future directions for HTML, not just attempted to map out future directions for HTML, not just
react to vendors react to vendors
HTML 4.01(W3C, 1999):HTML 4.01(W3C, 1999):
XHTML 1.0 (W3C, 2000): HTML 4.01 modified to XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standardsconform to XML standards
XHTML 1.1 (W3C, 2001): “Modularization” of XHTML XHTML 1.1 (W3C, 2001): “Modularization” of XHTML 1.01.0
HTML 5 (HTML 5 (Web Hypertext Application Technology Web Hypertext Application Technology Working Group, Working Group, W3C, 2006): NewW3C, 2006): New
![Page 7: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/7.jpg)
HTML Tags
We use some codes to explain to computer what are we going to do. These codes called as “Tags”.
HTML tags must type in the angle brackets(<>) ,it wants to type in a text editor and save with .htm or .html extension. If we use a tag we should close the tag. To close the tag we use closing tags(</>).
![Page 8: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/8.jpg)
Software & Text Editors
• What You See is What You Get(Software):
Dreamweaver, Microsoft FrontPage, Netscape Composer, Adobe Page Mill, ,Hotdog
• Word (Save As Webpage)
• Text Editors
• Notepad
• Word pad
• Code View
• GEdit
• Nano Editor
![Page 9: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/9.jpg)
• In HTML we use some essential tags. They are
• <html>
• <head> Heading Section
• <title></title>
• </head>
• <body></body>
• </html> Body Section
![Page 10: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/10.jpg)
HTML Tags
• Tag – an HTML code that tells the browser HOW to display something
• Opening Tag <h3>
• Closing Tag </h3>
• Example : <b>This will be bold</b>
• Tags will not appear in browsers
• All open tags must have corresponding closing tag.
![Page 11: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/11.jpg)
Attributes
Attributes provide additional display information about a tag
Attributes appear within the opening tag brackets
Attribute values must be contained in quotes You can have more than one attribute in a tag
<font size=“1” color=“green">This text would be green and smaller</font>
![Page 12: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/12.jpg)
HTML Tags
![Page 13: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/13.jpg)
Basic Tags
<html></html>Creates an HTML document
<head></head>Sets off the title and other
information that isn't displayed on the Web page itself
<body></body>Sets off the visible portion of the document
![Page 14: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/14.jpg)
Header Tags
<title></title>Puts the name of the document in
the title bar
Things in the header section do not appear in the browser
![Page 15: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/15.jpg)
Body Attributes
<body bgcolor=?>Sets the background color, using name or
hex value
<body text=?>Sets the text color, using name or hex value
<body background=url>Specifies an image file to be used as
background
<body vlink=?>Sets the color of followed links, using name or hex value
<body alink=?>Sets the color of links on click
![Page 16: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/16.jpg)
Text Formatting Tags 1
<hl></hl>Creates the largest header
<h6></h6>Creates the smallest header
<b></b>Creates bold text
<i></i>Creates italic text
![Page 17: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/17.jpg)
Text Formatting Tags 2
<strong></strong> Emphasizes a word (with italic or bold)
<font size=“?”></font>Sets size of font
<font color=“?”></font>Sets font color, using name or hex value
<font face=“?”></font>
Set font style like Comic Sans MS
![Page 18: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/18.jpg)
Paragraph Formatting Tags
<p></p>Creates a new paragraph
<p align=?>Aligns a paragraph to the left, right, or center
<br>Inserts a line break
<blockquote></blockquote> Indents text from both sides
![Page 19: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/19.jpg)
Ordered Lists –this is a numbered list, starts with <ol> and ends with </ol>, each new item in list requires the <li> tag
HTML Formatting
Sample code….<ol> List Name <li> list item 1<li> list item 2<li> list item 3<li> list item 4</ol>
Browser view…Yankees Starting Lineup 1. Johnny Damon2. Derek Jeter3. Bobby Abreu4. Robbie McGarry
![Page 20: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/20.jpg)
Un-ordered Lists –bulleted list of items, starts with <ul> tag and ends with </ul> tag, and each list item begins with <li>
HTML Formatting
Sample code….<ul> List Name <li> list item 1<li> list item 2<li> list item 3<li> list item 4</ul>
Browser view…Yankees Starting Lineup •Johnny Damon•Derek Jeter•Bobby Abreu•Robbie McGarry
![Page 21: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/21.jpg)
Definition Lists –not a list of items but a list of terms and explanations or definitions
Note: inside a definition list (the <dd> tag) you can put paragraphs, line breaks, images, links and other lists
HTML Formatting
Sample code….<dl> <dt>Vocab Word 1 <dd>Definition 1<dt>Vocab Word 2<dd>Definition 2</dl>
Browser view…
Rockhard object, made..
Ballround object….
![Page 22: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/22.jpg)
Table Formatting Tags
<table></table>Creates a table
<tr></tr>Sets off each row in a table
<td></td>Sets off each cell in a row
<table border=#>Sets width of border around table cells
<table width=“ ? %” or height=“ ? %”>Sets width and height of table - in pixels or as
a percentage of document width
![Page 23: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/23.jpg)
How Tables Work
<tr> </tr>
<table>
</table>
<td> </td><td> </td> </td><td>
<tr> </tr><td> </td><td> </td> </td><td>
<tr> </tr><td> </td><td> </td> </td><td>
![Page 24: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/24.jpg)
Images Img = image
src = source of the image
alt = stands for alternate and is used to name the image, important for visually impaired users (text to speech)
<img src =“nameoftheimage.jpg” alt=“description”>
<img src =“nameoftheimage.gif” alt=“description”>
![Page 25: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/25.jpg)
Images Aligning Images can be done with the
“align=“ tag. Place this inside of your image source code. You can only align to the right or to the left with this tag.
<img src=“name.jpg” alt=“description” align=“right”>
*Note <img….> tag is an empty tag with no </img> tag necessary
![Page 26: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/26.jpg)
Image as a Link <a href=“url or file name”><img src =
“imagefile.jpg” alt=“description”></a>
Insert the img src tag in place of the clickable text on a
normal link
![Page 27: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/27.jpg)
Creating LinksTwo types of links
1. absolute: link to an outside website
2. relative: link to another page within your website
HTML uses the <a> (anchor) tag to create a link to another document
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The correct Syntax of creating an anchor:
<a href="url">Text to be displayed</a>
![Page 28: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/28.jpg)
Creating Absolute Links
<a href="url">Text to be displayed</a>
Anchor Tag
Href attribute used to
address the document to
link to
Where this link will take
you
Text hyperlink
that appears in browser
Closing
Anchor Tag
![Page 29: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/29.jpg)
Creating Relative Links
<a href=“nameofpage.html">Text to be displayed</a>
Anchor Tag
href attribute used to
address the document to link to
Where this link will take you (page
within website name
Text hyperlink
that appears in browser
Closing Anchor
Tag
![Page 30: Intro to html](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55593661d8b42a543d8b4bc1/html5/thumbnails/30.jpg)
Link TagLink TagHtml Links :Html Links :
Html links are defined with the
<a> tag
Syntax :Syntax : <a href="http://www.gmil.com">Gmail</a>
ExampleExample : :
<html><body>
<a href="http://www.gmail.com">Gmail</a>
</body></html>
GmailO/P :O/P :If we click this link it goes to gmail account