By: RNCOE Teacher Trainees 2009-2011 Batch HTML Ruwanpura National College Of Education. Wallandura. Kahawatta. (Basics of HTML) (Basics of HTML) Workshop
Html basic
Jan 13, 2015
FOR YOUR ICT KNOWLEDGE (Meth Prarthana)
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
By: RNCOE Teacher Trainees
2009-2011 Batch
HTML
Ruwanpura National College Of Education. Wallandura.
Kahawatta.
(Basics of HTML)(Basics of HTML)
Workshop
SPECIALLY PRESENTED FOR :
R/ GANKANDA CENTRAL COLLEGE(NATIONAL SCHOOL)
GRADE 10, 11 STUDENTS
2010 – 10 - 04
LANGUAGES WE USE IN COMPUTER
• Language we use to coordinate computer and the human who use the computer.
• There are so many languages we use to give instructions to computer. Such as;• JAVA , VISUAL BASIC , PASCAL , C++
,C programming Language , C# , HTML
NOW WE LEARN ABOUT HTML(HYPER TEXT MARKUP LANGUAGE)
• HTML is an evolving standard (as new technology/tools HTML is an evolving standard (as new technology/tools are added) are added)
HTML 1 (Sir Tim Berners-Lee, 1989): very basic, limited HTML 1 (Sir Tim Berners-Lee, 1989): very basic, limited integration of multimediaintegration 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 & other HTML 2.0 (IETF, 1994): tried to standardize these & other features, but latefeatures, 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 single HTML 3.2 (W3C, 1996): attempted to unify into a single standardstandard
but didn't address newer technologies like Java applets & but didn't address newer technologies like Java applets & streaming videostreaming video
Beginning of Beginning of HTMLHTML
Beginning of HTML (cont.)Beginning of HTML (cont.) HTML 4.0 (W3C, 1997): current standard HTML 4.0 (W3C, 1997): current standard
(but moving towards XHTML)(but moving towards XHTML)attempted to map out future directions for HTML, not just attempted to map out future directions for HTML, not just
react to vendorsreact to vendors
XHTML 1.0 (W3C, 2000): HTML 4.01 XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standardsmodified to conform to XML standards
XHTML 1.1 (W3C, 2001): “Modularization” XHTML 1.1 (W3C, 2001): “Modularization” of XHTML 1.0of XHTML 1.0
HTML 5 (HTML 5 (Web Hypertext Application Web Hypertext Application Technology Working Group, Technology Working Group, W3C, 2006): W3C, 2006): NewNew
version of HTML4, XHTML 1.0, and version of HTML4, XHTML 1.0, and DOM 2 (still a work in progress)DOM 2 (still a work in progress)
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.
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(</>).
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
• In HTML we use some essential tags. They are
• <html>
• <head> Heading Section
• <title></title>
• </head>
• <body></body> Body Section
• </html>
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.
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>
HTML Tags
COMMON STRUCTURE AND FORMATTING HTML TAGS
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
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
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 link=?>Sets the color of links, using name or hex
value
<body vlink=?>Sets the color of followed links, using name or hex value
<body alink=?>Sets the color of links on click
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
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
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
LIST FORMATTING TAGS
<ol></ol>Creates a numbered list
<ul></ul>Creates a bulleted list with the use of <li>
<li></li>Precedes each list item, and adds a number
GRAPHICAL ELEMENTS
<img src="name.extention">Adds an image
<img src="name.extention" align=?>Aligns an image: left, right, center; bottom, top, middle
<img src="name.extention" border=?>Sets size of border around an image
<hr>Inserts a horizontal rule
<hr size=?>Sets size (height) of rule
<hr width=?>Sets width of rule, in percentage or absolute value
Always use an alt tag for images, eg. <img src=“name.extention” alt=“picture of cat”>
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
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>
LINKS TAGS
<a href="URL"></a>Creates a hyperlink
<a href="mailto:e-mail address"></a>Creates a mailto link
<a name="NAME"></a>Creates a target location within a
document
<a href="#NAME"></a>Links to that target location from
elsewhere in the document
WEB BROWSERS
HTML is the language HTML is the language web browsers use to web browsers use to format the data format the data presented in web presented in web pages.pages.
All browsers are not All browsers are not equal.equal.
What we use and why.What we use and why.
NOW !!!
SHALL WE MAKE A WEB PAGE ?
BASIC HTML SYNTAX
OTHER WEB DEVELOPMENT TOOLS
Cascading Style SheetCascading Style Sheet(CSS)(CSS)
JavaScriptJavaScript
VB SriptVB Sript
PHPPHP
More InfoMore Info
HTML guide in your textHTML guide in your text Web terms: Web terms:
http://www.imaginarylandscape.com/helpweb/www/www.htmlhttp://www.imaginarylandscape.com/helpweb/www/www.html HTML intro and tutorials:HTML intro and tutorials:
http://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asp Official HTML tags: Official HTML tags:
http://www.w3.org/TR/html4/http://www.cwru.edu/help/webglossary.htmlhttp://www.w3.org/TR/html4/http://www.cwru.edu/help/webglossary.html
SPECIAL THANKS FOR:
•The Principal of R/ Gankanda National School,
•ICT Teachers including ICT sectional head,
•All Teachers of R/ Gankanda National School,
•All Friends of Ruwanpura National College Of Education1st Year Teacher Trainees,
•All Friends of Ruwanpura National College Of Education2nd Year Teacher Trainees,
•All Friends of Ruwanpura National College Of Education3rd Year Teacher Trainees,
And
•Other all helped people for do this project successfully.
Related Documents
![[Basic HTML/CSS] 2. html - list tags](https://static.cupdf.com/doc/110x72/58ce75c41a28abdc578b67d9/basic-htmlcss-2-html-list-tags.jpg)
![[Basic HTML/CSS] 1. html - basic tags](https://static.cupdf.com/doc/110x72/58ce75c41a28abdc578b67db/basic-htmlcss-1-html-basic-tags.jpg)
