Web page_mayette

350 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
350
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web page_mayette

  1. 1. DAY1: HTML Basics, HTML Text, HTML List, HTML Images SPEAKERS: Caren R./Elizabeth P.
  2. 2.  WebPages are written in HTML - a simple scripting language. HTML is short for HyperText Markup Language. Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information within documents. Basically an HTML document is a plain text file that contains text and nothing else. Since HTML documents are just text files they can be written in even the simplest text editor.
  3. 3.  To tell the browser that an "A" should be bold we need to put a markup in front of the A. Such a markup is called a Tag. All HTML tags are enclosed in < and >. Thisis an example of <b>bold</b> text. OUTPUT: This is an example of bold text.
  4. 4.  All normal webpages consist of a head and a body. The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page. <html> <head> <!-- This section is for the title and technical info of the page. --> </head> <body> <!-- This section is for all that you want to show on the page. --> </body> </html>
  5. 5.  Thehead section of the webpage includes all the stuff that does not show directly on the resulting page. The <title> and </title> tags encapsulate the title of your page. Metatagsare used for, among other things, to improve the rankings in search engines.
  6. 6.  BASE FONT - To specify the overall font for your page add the <basefont> tag at the beginning of the <body> section. <html> <head> <title> My Autobiography</title> </head> <body> <basefont face="arial, verdana, courier" size="4" color="green"> <“ your info. Goes here”> </body> </html> OUTPUT: Hello! This is my page. All text looks the same since I only specified a basefont.
  7. 7.  The <font> tag will change the font. <html> <head> <title>My Page</title> </head> <body> <basefont color="green" face="arial" size="4"> Hello! This is my page.<br><br> <font color="red" face="arial" size="2"> This local text looks different. </font> <br><br> This text looks like the first line. </body> </html>OUTPUT: My Autobiography This local text looks different. This text looks like the first line.
  8. 8.  Thetags used to produce links are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends. The target of the link is added to the <a> tag using the href="http://www.whateverpage.com"setting Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
  9. 9. <b>text</b> writes text as bold<i>text</i> writes text in italics<u>text</u> writes underlined text<sub>text</sub> lowers text and makes it smaller<sup>text</sup> lifts text and makes it smaller<blink>text</blink> guess yourself! (Note: Netscape only.)<strike>text</strike> strikes a line through the text<tt>text</tt> writes text as on a classic typewriter<pre>text</pre> writes text exactly as it is, including spaces.<em>text</em>` usually makes text italic<strong>text<strong> usually makes text bold
  10. 10. <big>text</big> increase the size by one<small>text</small> decrease the size by one<h1>text </h1> writes text in biggest heading<h6>text</h6> writes text in smallest heading<font size="1">text</font> writes text in smallest fontsize. (8 pt)<font size="7">text </font> writes text in biggest fontsize (36 pt)
  11. 11.  These tags will let you control the layout. HTML EXPLANATION Adds a paragraph break after the text.<p>text</p> (2 linebreaks).<p align="left">text</p> Left justify text in paragraph.<p align="center">text</p> Center text in paragraph.<p align="right">text</p> Right justify text in paragraph. Adds a single linebreak where the tagtext<br> is. Turns off automatic linebreaks<nobr>text</nobr> - even if text is wider than the window.
  12. 12. HTML EXPLANATIONtext<wbr> Allows the browser to insert a linebreak at exactly this point - even if the text is within <nobr> tags.<center>text</center> Center text.<div align="center">text</div> Center text.<div align="left">text</div> Left justify text.<div align="right">text</div> Right justify text.
  13. 13.  Tocreate a bulleted list you need to add a <ul> and a </ul> tag at the beginning and the end of the list. Numbered lists have <ol> tags instead of <ul> tags. Toseparate single list items use <li> and </li> tags
  14. 14. You have the following bullet options:  disc  circle  Square
  15. 15. HTML CODE EXAMPLE/EXPLANATION Makes a bulleted list using the default bullet<ul> type:<li>text</li> text<li>text</li><li>text</li> text</ul> text Starts a bulleted list using discs as bullets: This is one line<ul type="disc"> This is another line And this is the final line Starts a bulleted list using circles as bullets: o This is one line<ul type="circle"> o This is another line o And this is the final line Starts a bulleted list using squares as bullets:<ul type="square">  This is one line  This is another line  And this is the final line
  16. 16. You have the following number options:  Plainnumbers  Capital Letters  Small Letters  Capital Roman Numbers  Small Roman Numbers
  17. 17. HTML CODE EXAMPLE/EXPLANATIOM Makes a numbered list using the default<ol> number type:<li>text</li> 1. text<li>text</li><li>text</li> 2. text</ol> 3. text Starts a numbered list, first # being 5. 5. This is one line<ol start="5"> 6. This is another line 7. And this is the final line Starts a numbered list, using capital letters. A. This is one line<ol type="A"> B. This is another line C. And this is the final line Starts a numbered list, using small letters. a. This is one line<ol type="a"> b. This is another line c. And this is the final line
  18. 18. HTML CODE EXAMPLE/EXPLANATION Starts a numbered list, using capital roman numbers. I. This is one line<ol type="I"> II. This is another line III. And this is the final line Starts a numbered list, using small roman numbers. i. This is one line<ol type="i"> ii. This is another line iii. And this is the final line Starts a numbered list, using normal numbers. 1. This is one line<ol type="1"> 2. This is another line 3. And this is the final line An example of how type and start can be combined. VII. This is one line<ol type="I" start="7"> VIII.This is another line IX. And this is the final line
  19. 19.  Thissection will show how to add images to your pages. We will start out with a presentation of the two main image types on webpages: jpg and gif. GIF JPG 256 colors Unlimited colors Can handle transparent areas Cant handle transparent areas This format is not good at Excellent for compressing compressing photographs photographs and complex images In general, it is excellent for In general, it is not good for banners, buttons and clipart banners, buttons and clipart.
  20. 20.  Banners,buttons, dividers, clipart and other simple images usually work best as GIFs. Photographs and other complex images usually work best as JPGs.
  21. 21.  The tag used to insert an image is called img. <img src="http://www.echoecho.com/rainbow.gif"> HTML code used to insert the image on this webpage: <img src="rainbow.gif"> If the image is stored in the same folder as the HTML page, you can leave out the domain reference (http://www.echoecho.com/) and simply insert the image with this code:
  22. 22.  Youcan change the size of an image using the width and height attributes. <img src="http://www.echoecho.com/rainbow.gif" width="60" height="60"> Real width and height <img src="http://www.echoecho.com/rainbow.gif" width="120" height="120"> If you leave out the settings for width and height, the browser will automatically use the real size of the image.
  23. 23. <img src="http://www.echoecho.com/rainbow.gif" border="5">Adding a border to your image might help the visitor recognize that the image is a link.
  24. 24. <img src="http://www.echoecho.com/rainbow.gif" alt="This is a text that goes with the image">You can add an alternative text to an image using the alt setting shown in the example above.You should always add alternative texts to your images, so the users can get an idea of what the image is about before it is loaded.
  25. 25.  You can easily add space over and under your images with the Vspace attribute. In a similar way you can add space to the left and right of the image using the Hspace attribute.` <img src="rainbow.gif" Hspace="30" Vspace="10">These settings allow you to add spacing around your image. <img src="pixel.gif" width="10" height="1"><img src="rainbow.gif">The 1x1 pixel transparent gif image is simply stretched to whatever size you want the spacing to have.
  26. 26. HTML CODES <img src="rainbow.gif" align="texttop"> <img src="rainbow.gif" align="top"> <img src="rainbow.gif" align="middle"> <img src="rainbow.gif" align="absmiddle"> <img src="rainbow.gif" align="bottom"> <img src="rainbow.gif" align="absbottom"> <img src="rainbow.gif" align="baseline">
  27. 27. HTML-CODE OUTPUT bla bla bla bla bla blabla bla<img src="rainbow.gif" bla bla bla bla bla bla bla bla bla bla blaalign="left"> bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla<img src="rainbow.gif" bla bla bla bla bla bla bla bla bla bla blaalign="right"> bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla blabla bla bla bla bla

×