Your SlideShare is downloading. ×
0
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Html For Beginners 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html For Beginners 2

1,619

Published on

This ppt is html for beginners and html made easy for them to get the basic idea of html. …

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.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,619
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
91
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. WEEK 2: Design Tools: HTML, XHTML <ul><li>Ahsan Uddin Shan School of Film & Media Studies Ngee Ann Polytechnic </li></ul>
    • 2. Objectives <ul><li>Learn about Web authoring tools </li></ul><ul><li>Learn about the capabilities of HTML, XHTML and how they can assist you in Web development </li></ul><ul><li>Understand what is HTML </li></ul><ul><li>Understand basic document structure </li></ul><ul><li>Use HTML tags to format document </li></ul><ul><li>Create a local HTML document viewable with a browser </li></ul><ul><li>Understand the role of the W3C </li></ul>
    • 3. HTML Documents <ul><li>Originally, people created Web pages using Hypertext Markup Language </li></ul><ul><li>Hypertext Markup Language (HTML) is a simple language used to create the Web pages that appear on the World Wide Web </li></ul><ul><li>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 </li></ul>
    • 4. HTML <ul><li>The stuff that web pages made of </li></ul><ul><li>Telling the browser what to do </li></ul><ul><li>A series of tags that are integrated into a text document </li></ul><ul><li>Tags are ; surrounded with angle brackets like this <B> or <I>. </li></ul><ul><li>Supported by thousands of applications </li></ul>
    • 5. target output format <ul><li>There are different output device </li></ul><ul><li>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 </li></ul>
    • 6. Basic HTML Syntax <ul><li>HTML documents are text documents that contain: </li></ul><ul><ul><li>formatting instructions, called tags </li></ul></ul><ul><ul><li>Content [b/w body tag] </li></ul></ul><ul><li>Tags are enclosed in brackets [< >] </li></ul><ul><li><title> time management : so many boys so little time </title> </li></ul>
    • 7. To configure HTML tags <ul><li>You use various parameters, called attributes , to configure many HTML tags </li></ul><ul><li>It goes after the tag </li></ul><ul><li><body bgcolor=“green”> </li></ul>
    • 8. The W3C <ul><li>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 </li></ul><ul><li>W3c.org </li></ul>
    • 9. Sneak preview <ul><li>Is this html or xhtml </li></ul>
    • 10. another an html document <ul><li>Step1 : Choose any text editor program, Notepad, Edit, Word,etc. </li></ul><ul><li>Step 2 : Enter the following code <html> <head> <title>how to start </title> </head> <body> </li></ul><ul><ul><ul><li>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!!!! </li></ul></ul></ul><ul><ul><ul><li></body> </html> </li></ul></ul></ul>
    • 11. another an html document <ul><li>STEP 3: Go to the file menu and choose Save As option and save the file as how_to_create.html </li></ul><ul><li>STEP 4: Click and open your web browser, navigate to your how_to_create.html file to view the output. </li></ul>
    • 12. Another an html document <ul><li><HTML> </li></ul><ul><li><HEAD><TITLE></TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
    • 13. The Basics: Minimal HTML <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> </li></ul><ul><li>Firstdocument.htm </li></ul><ul><li></TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>The Document Text </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
    • 14. The Basics: Minimal HTML <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
    • 15. head Tags <ul><li><head> : Defines information about the document </li></ul><ul><li><title> : Defines the document title Contains the page title, to be displayed in the browser window title bar and user book mark menu. </li></ul><ul><li><meta> :Defines meta information Tag Description </li></ul><ul><li><!DOCTYPE> Defines the document type. This tag goes before the <html> start tag. </li></ul>
    • 16. HTML Tags <ul><li>Formatting applies to all text between tags </li></ul><ul><li>Once you understand what each tag means, creating your HTML document is easy! </li></ul><ul><li>Learn new tags by viewing source code from already existing pages </li></ul><ul><li>< OPENTAG> Formatted Text </ CLOSETAG > </li></ul>
    • 17. HTML Tags: Heading <H#> <ul><li>Heading tags are applied to text and are a good way to make different sections in your document </li></ul><ul><li>They are displayed in various fonts and sizes to indicate relative importance. </li></ul><ul><li>Headings come in levels 1 – 6 </li></ul><ul><ul><li><H1> <H2> <H3> <H4> <H5> <H6> </li></ul></ul>
    • 18. HTML Tags: Application
    • 19. HTML tags: Paragraph <P> <ul><li>HTML browsers ignore white space between paragraphs </li></ul>= … <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>…
    • 20. HTML tags: Paragraph <P> <ul><li>The paragraph tag forces the browser to start a new paragraph. </li></ul><ul><li>New paragraphs always have a space between them </li></ul>
    • 21. HTML tags: Paragraph <P> whitespace
    • 22. HTML tags: Line Break <br> <ul><li>Force the browser to break to the next line </li></ul><ul><ul><li>Paragraphs cause space between </li></ul></ul><ul><ul><li>Line breaks have no space between </li></ul></ul>
    • 23. HTML tags: Line Break <br> no white space
    • 24. HTML tags: Horizontal Rule <hr> <ul><li>Method for breaking up space </li></ul><ul><li>Causes a line to appear across the webpage </li></ul><ul><li>Default width is the entire page </li></ul><ul><ul><li>Width can be adjusted </li></ul></ul><ul><ul><li>Thickness (size) can be adjusted </li></ul></ul>
    • 25. <ul><li>Another way to format text </li></ul><ul><li>Lists can be ordered (number) or unordered (bullet point) </li></ul>HTML tags: Lists Oranges Apples Pears bananas <ul><li>Oranges </li></ul><ul><li>Apples </li></ul><ul><li>Pears </li></ul><ul><li>bananas </li></ul>Unordered List
    • 26. <ul><li>Another way to format text </li></ul><ul><li>Lists can be ordered (number) or unordered (bullet point) </li></ul>HTML tags: Lists Oranges Apples Pears bananas <ul><li>Oranges </li></ul><ul><li>Apples </li></ul><ul><li>Pears </li></ul><ul><li>bananas </li></ul>Ordered List
    • 27. <ul><li>ORDERED LIST </li></ul><ul><li><OL> </li></ul><ul><li><LI> oranges </li></ul><ul><li><LI> apples </li></ul><ul><li><LI> pears </li></ul><ul><li><LI> bananas </li></ul><ul><li></OL> </li></ul><ul><li>UNORDERED LIST </li></ul><ul><li><UL> </li></ul><ul><li><LI> oranges </li></ul><ul><li><LI> apples </li></ul><ul><li><LI> pears </li></ul><ul><li><LI> bananas </li></ul><ul><li></UL> </li></ul>HTML tags: Lists LI = List Item
    • 28. HTML tags: Lists
    • 29. <ul><li>Definition List <DL> </li></ul><ul><ul><li>Useful for defining terms, words </li></ul></ul><ul><ul><li>Same formatting as other lists </li></ul></ul><ul><li><DL> </li></ul><ul><li><DT>orange </li></ul><ul><li><DD>A citrusy fruit </li></ul><ul><li><DT>banana </li></ul><ul><li><DD>A yellow fruit </li></ul><ul><li></DL> </li></ul>HTML tags: Lists Definition TITLE Definition DESCRIPTION
    • 30. HTML tags: Lists Definition TITLE Definition DESCRIPTION
    • 31. HTML tags <ul><li>In general, all tags should have a closing tag </li></ul><ul><ul><li><OL> </OL>, <H2></H2> </li></ul></ul><ul><ul><li>Some tags don’t need closing tag because it is assumed </li></ul></ul><ul><ul><li><P>, <LI>, <HR>, <BR> </li></ul></ul><ul><li>Important to view document for formatting preview before going public </li></ul>
    • 32. XHTML tags <ul><li>Different browser technologies targets different devices </li></ul><ul><li>Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML. </li></ul><ul><li>XHTML pages can be read by all XML enabled devices </li></ul>
    • 33. XHTML tags <ul><li>XHTML is a combination of HTML and XML (eXtensible Markup Language). </li></ul><ul><li>XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML. </li></ul><ul><li>XML is a markup language where everything has to be marked up correctly, which results in &quot;well-formed&quot; documents. </li></ul>
    • 34. “Safe” XHTML example <ul><li><?xml version= &quot; 1.0 &quot; encoding= &quot; utf-8 &quot; ?> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul><ul><li>&quot;DTD/xhtml1-strict.dtd&quot; > </li></ul><ul><li><html xmlns= &quot; http://www.w3.org/1999/xhtml1 &quot; </li></ul><ul><li>xml:lang= &quot; en-ca &quot; lang= &quot; en-ca &quot; > </li></ul><ul><li><head> </li></ul><ul><li><title> ... </title> </li></ul><ul><li><meta http-equiv= &quot;content-type&quot; </li></ul><ul><li>content= &quot; text/html;charset=utf-8 &quot; / > </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>..... </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>space before slash
    • 35. XHTML tags <ul><li>Three types of XHTML pages, they are: </li></ul><ul><ul><li>Strict: Use with CSS </li></ul></ul><ul><ul><li>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) </li></ul></ul><ul><ul><li>Frameset: documents with frames </li></ul></ul><ul><li>Add the <!doctype> tag <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul>
    • 36. How to write properly XHTML tags <ul><li>Use all lower case </li></ul><ul><li>Attributes goes in quotes </li></ul><ul><li>Close all tags </li></ul><ul><li>Always nest tags properly </li></ul>

    ×