design tools html xhtml
Post on 11-Sep-2014
2.765 views
DESCRIPTION
html, xhtml, slidesaresTRANSCRIPT
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
WEEK 2: Design Tools: HTML, XHTML
Ahsan Uddin ShanSchool of Film & Media Studies
Ngee Ann Polytechnic
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
To configure HTML tags You use various parameters, called attributes,
to configure many HTML tags It goes after the tag <body bgcolor=“green”>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
Sneak previewIs this html or xhtml
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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.
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
Another an html document<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
The Basics: Minimal HTML<HTML>
<HEAD><TITLE>Firstdocument.htm</TITLE>
</HEAD><BODY>The Document Text</BODY>
</HTML>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
<HTML><HEAD>
<TITLE>
</TITLE></HEAD>
<BODY>
</BODY></HTML>
The Basics: Minimal HTML
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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.
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
HTML Tags: Application
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
… <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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
HTML tags: Paragraph <P> The paragraph tag forces the browser to start a
new paragraph. New paragraphs always have a space between
them
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
whitespace
HTML tags: Paragraph <P>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
HTML tags: Line Break <br> Force the browser to break to the next line
Paragraphs cause space between Line breaks have no space between
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
no white space
HTML tags: Line Break <br>
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
HTML tags: Lists
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
Definition TITLEDefinition
DESCRIPTION
HTML tags: Lists
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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.
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
“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
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
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">
Design Tools: HTML Ahsan Uddin ShanWeek 2, April 2008
How to write properly XHTML tags
Use all lower case Attributes goes in quotes Close all tags Always nest tags properly