Intro to html

229 views

Published on

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

No Downloads
Views
Total views
229
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to html

  1. 1. Introduction to HTML HyperText Markup Language
  2. 2. What is HTML?
  3. 3. What is HTML?  Hypertext Markup Language
  4. 4. What is HTML? Hypertext Markup Language  Hypertext:  Allows for non-linear linking to other documents
  5. 5. What is HTML? Hypertext Markup Language  Hypertext:  Allows for non-linear linking to other documents  Markup Language:  Content to be displayed is “marked up” or tagged to tell the browser how to display it.
  6. 6. HTML  are the main code used for creating and designing web pages.  is written in the form of HTML elements consisting of tags enclosed in angle brackets (like: <html> ).  Elements or tags <html></html>  Attributes that modify an element
  7. 7. HTML  HTML allows images and objects to be embedded and can be used to create interactive forms.  It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
  8. 8. Elements  Elements are the fundamental building blocks of HTML.  They are the tags that tell the browser what the enclosed text is. <title>My first HTML page</title> The title element tells the browser that this is the title of the page.  Elements must be terminated
  9. 9. HTML The pur pose of a web br owser i s t o r ead HTML document s and compose t hem i nt o vi si bl e or audi bl e web pages. The br owser does not di spl ay t he HTML t ags, but uses t he t ags t o i nt er pr et t he cont ent of t he page.
  10. 10. Elements General format of an element: <startTag>Target content</endTag> HTML is NOT case sensitive…
  11. 11. HTML Skeleton <html> <head> <title>My first HTML Page!</title> </head> <body> I Love HTML! </body> </html>
  12. 12. What do we need? | How to Save?  Notepad  To save: File > Save As > .txt and .html
  13. 13. HTML Sample <html> <head> <title>My first HTML Page!</title> </head> <body> I Love HTML! Hypertext Markup Language! </body> </html>
  14. 14. Activity Time: 1. Open a Notepad 2. Using the basic html tags and elements, input the paragraph below and save as: HTMLDoc1.html
  15. 15. Filename: HTMLDoc1.html Title: My First HTML Document Body: My name is Juan Dela Cruz and my hobbies are playing online games, surfing the net, read travelling books and hang-out with my friends.
  16. 16. Assignment: Follow-up: 1. Give the other elements and attributes in html. References: Book: World Wide Web Development III, pages 46-48 Website: www.w3schools.com
  17. 17. Common Elements <html></html>  All markup must be placed within HTML tags <head></head>  Contains information about the page as well as other non-display content <body></body>  All display content should go inside these tags
  18. 18. Common Elements <p></p>  Tells the browser that the enclosed text should be set off in a paragraph. <h1></h1>  This is a heading – the number can range from 1 to 7 for different sizes
  19. 19. Text Display Elements <b></b> or <strong></strong>  Bolds the tagged text <em></em> or <i></i>  Italicizes the tagged text <pre></pre>  Preserves white space and breaks and stands for “preformatted”
  20. 20. Common Tags <br>  Inserts a line break  This is an empty tag – it does not have a closing tag. <hr>  Inserts a horizontal rule (line)  This is another empty tag
  21. 21. HTML Comments An HTML Comment which is NOT displayed in the page is done like this: <!-- This is a comment -->
  22. 22. Attributes Sometimes we need more information for an element in order to control the way the content displays We provide this information with attributes stated within the element start tag
  23. 23. Attributes The generic way of using an attribute looks like this: <elementName attribute=“value”> Target content </elementName> Single or double quotes may be used to hold attribute values
  24. 24. Attribute examples <p align=“center”>This will appear centered</p> <img src=“mypicture.jpg”>  This tag inserts the image “mypicture.jpg” into the page.  Make sure to use the right path!
  25. 25. Hyperlinks Hyperlinks are created using the <a> tag, which stands for “anchor”. The format looks like this: <a href=“uri_to_document”>Content to click on for the link</a> The uri can also be a mailto: link
  26. 26. Tables Tables require three different tags: <table></table>  Defines the table itself <tr></tr>  Defines a table row <td></td>  Defines a table cell (table data)
  27. 27. Tables Example table: <table> <tr><td>Column One, row one</td> <td>Column Two, row one</td> </tr> <tr><td>Column One, row two</td> <td>Column Two, row two</td> </tr> </table>
  28. 28. Lists Two main types:  Unordered list  <ul></ul>  Ordered List  <ol></ol>  List items are indicated by <li></li>
  29. 29. Font You can modify more exactly the way text looks by using the <font></font> tag: <font color=“red” size=“3” face=“Garamond”> This is red, size 3, and in Garamond! </font>
  30. 30. Entities Some content characters may not show up properly if simply placed inside tags. How would you mark up the following: Is 3<4 ?
  31. 31. Entities In order to display these characters, we use entities to represent them: Character: Entity: < &lt; > &gt; & &amp; [space] &nbsp;

×