36

Click here to load reader

Html For Beginners 2

  • Upload
    raj-sri

  • View
    1.612

  • Download
    1

Embed Size (px)

DESCRIPTION

This ppt is html for beginners and html made easy for them to get the basic idea of html.Html for beginners. A basic information of html for beginners. A more depth coverage of html and css will be covered in the future presentations. visit my sites http://technoexplore.blogspot.com and http://hotjobstuff.blogspot.com for some other important presentations.

Citation preview

Page 1: Html For Beginners 2

WEEK 2: Design Tools: HTML, XHTML

Ahsan Uddin ShanSchool of Film & Media Studies

Ngee Ann Polytechnic

Page 2: Html For Beginners 2

Objectives Learn about Web authoring tools Learn about the capabilities of HTML, XHTML and

how they can assist you in Web development Understand what is HTML Understand basic document structure Use HTML tags to format document Create a local HTML document viewable with a

browser• Understand the role of the W3C

Page 3: Html For Beginners 2

HTML Documents Originally, people created Web pages using

Hypertext Markup Language Hypertext Markup Language (HTML) is a

simple language used to create the Web pages that appear on the World Wide Web

A markup language is a set of characters or symbols that define a document’s structure or how a document should be printed or displayed

Page 4: Html For Beginners 2

HTML The stuff that web pages made of Telling the browser what to do A series of tags that are integrated into a text

document Tags are ; surrounded with angle brackets like

this <B> or <I>. Supported by thousands of applications

Page 5: Html For Beginners 2

target output format There are different output device

A target output format refers to the medium in which a document will be displayed, such as a Web page or an online help system

Page 6: Html For Beginners 2

Basic HTML Syntax HTML documents are text documents that

contain: formatting instructions, called tags Content [b/w body tag]

Tags are enclosed in brackets [< >] <title> time management : so many boys so little

time </title>

Page 7: Html For Beginners 2

To configure HTML tags You use various parameters, called attributes,

to configure many HTML tags It goes after the tag <body bgcolor=“green”>

Page 8: Html For Beginners 2

The W3C To address the growing need for standards, Tim

Berners-Lee established the World Wide Web Consortium, or W3C, in 1994 at MIT to oversee the development of Web technology standards

W3c.org

Page 9: Html For Beginners 2

Sneak previewIs this html or xhtml

Page 10: Html For Beginners 2

another an html document Step1 : Choose any text editor program, Notepad, Edit, Word,etc. Step 2 : Enter the following code

<html> <head> <title>how to start </title> </head>

<body>

3 scientists happen to meet each other by chance at a party, an American, a Russian, and a Japanese. They boast their country's science achievements. The Russian says: We were the 1st ones in space, the American says, we were the 1st to goto moon, The Japanese thinks hard and says: we will be 1st ones on the sun! Both the american and russian start laughing, and say to the Japanese, you stupid the sun is too hot, your spaceship will burn b4 it reaches the sun. The Japanese scientist remains cool and calm, and says: You are stupid. We will go

there at night!!!! </body>

</html>

Page 11: Html For Beginners 2

another an html document STEP 3: Go to the file menu and choose Save

As option and save the file as how_to_create.html

STEP 4: Click and open your web browser, navigate to your how_to_create.html file to view the output.

Page 12: Html For Beginners 2

Another an html document<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>

Page 13: Html For Beginners 2

The Basics: Minimal HTML<HTML>

<HEAD><TITLE>Firstdocument.htm</TITLE>

</HEAD><BODY>The Document Text</BODY>

</HTML>

Page 14: Html For Beginners 2

<HTML><HEAD>

<TITLE>

</TITLE></HEAD>

<BODY>

</BODY></HTML>

The Basics: Minimal HTML

Page 15: Html For Beginners 2

head Tags <head>: Defines information about the document <title>: Defines the document title

Contains the page title, to be displayed in the browser window title bar and user book mark menu.

<meta>:Defines meta informationTag Description

<!DOCTYPE>Defines the document type. This tag goes before the <html> start tag.

Page 16: Html For Beginners 2

HTML Tags Formatting applies to all text between tags Once you understand what each tag means,

creating your HTML document is easy! Learn new tags by viewing source code from

already existing pages <OPENTAG> Formatted Text </CLOSETAG>

Page 17: Html For Beginners 2

HTML Tags: Heading <H#> Heading tags are applied to text and are a good

way to make different sections in your document They are displayed in various fonts and sizes to

indicate relative importance. Headings come in levels 1 – 6

<H1> <H2> <H3> <H4> <H5> <H6>

Page 18: Html For Beginners 2

HTML Tags: Application

Page 19: Html For Beginners 2

… <BODY> I love being a student at Ngee Ann Polytechnic in Singapore.

</BODY>…

… <BODY> I love being a student at

Ngee Ann Polytechnic in Singapore.

</BODY>…

=

HTML tags: Paragraph <P> HTML browsers ignore white space between

paragraphs

Page 20: Html For Beginners 2

HTML tags: Paragraph <P> The paragraph tag forces the browser to start a

new paragraph. New paragraphs always have a space between

them

Page 21: Html For Beginners 2

whitespace

HTML tags: Paragraph <P>

Page 22: Html For Beginners 2

HTML tags: Line Break <br> Force the browser to break to the next line

Paragraphs cause space between Line breaks have no space between

Page 23: Html For Beginners 2

no white space

HTML tags: Line Break <br>

Page 24: Html For Beginners 2

HTML tags: Horizontal Rule <hr>

Method for breaking up space Causes a line to appear across the webpage Default width is the entire page

Width can be adjusted Thickness (size) can be adjusted

Page 25: Html For Beginners 2

Oranges

Apples

Pears

bananas

•Oranges

•Apples

•Pears

•bananas

Unordered List

Another way to format text Lists can be ordered (number) or unordered

(bullet point)

HTML tags: Lists

Page 26: Html For Beginners 2

Oranges

Apples

Pears

bananas

1. Oranges

2. Apples

3. Pears

4. bananas

Ordered List

Another way to format text Lists can be ordered (number) or unordered

(bullet point)

HTML tags: Lists

Page 27: Html For Beginners 2

ORDERED LIST<OL>

<LI> oranges<LI> apples<LI> pears <LI> bananas

</OL>

UNORDERED LIST<UL>

<LI> oranges<LI> apples<LI> pears <LI> bananas

</UL>

LI = List Item

HTML tags: Lists

Page 28: Html For Beginners 2

HTML tags: Lists

Page 29: Html For Beginners 2

Definition List <DL> Useful for defining terms,

words Same formatting as other

lists

<DL><DT>orange<DD>A citrusy fruit<DT>banana<DD>A yellow fruit

</DL>

Definition TITLE

Definition DESCRIPTION

HTML tags: Lists

Page 30: Html For Beginners 2

Definition TITLEDefinition

DESCRIPTION

HTML tags: Lists

Page 31: Html For Beginners 2

HTML tags In general, all tags should have a closing

tag <OL> </OL>, <H2></H2> Some tags don’t need closing tag

because it is assumed <P>, <LI>, <HR>, <BR>

Important to view document for formatting preview before going public

Page 32: Html For Beginners 2

XHTML tags Different browser technologies targets

different devices Therefore - by combining HTML and XML,

and their strengths, we got a markup language that is useful now and in the future - XHTML.

XHTML pages can be read by all XML enabled devices

Page 33: Html For Beginners 2

XHTML tags XHTML is a combination of HTML and XML

(eXtensible Markup Language). XHTML consists of all the elements in HTML

4.01 combined with the syntax of XML. XML is a markup language where

everything has to be marked up correctly, which results in "well-formed" documents.

Page 34: Html For Beginners 2

“Safe” XHTML example

<?xml version= "1.0" encoding= "utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd" ><html xmlns= "http://www.w3.org/1999/xhtml1" xml:lang= "en-ca" lang= "en-ca" ><head><title> ... </title><meta http-equiv= "content-type" content= "text/html;charset=utf-8" /></head><body>.....</body></html>

spacebefore slash

Page 35: Html For Beginners 2

XHTML tags Three types of XHTML pages, they are:

Strict: Use with CSS

Transitional: The Transitional DTD includes presentation attributes and elements that W3C expects to move to a style sheet. Use this when you need to use HTML's presentational features because your readers don't have browsers that

support Cascading Style Sheets (CSS) Frameset: documents with frames

Add the <!doctype> tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Page 36: Html For Beginners 2

How to write properly XHTML tags

Use all lower case Attributes goes in quotes Close all tags Always nest tags properly