1 / 85

Web Page Design Lessons

Web Page Design Lessons. Lesson 1 : Introduction to HTML. Lesson 2 : HTML Tags. <font> <body> <h(n)> <hr> <img> html colors. Lesson 3 : HTML Tags. <marquee> <table> List Tags. Lesson 4 : HTML Tags. Formatting tags <frame> superscript bold <a> subscript italic   center.

rafael-craig
Download Presentation

Web Page Design Lessons

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Page Design Lessons Lesson 1: Introduction to HTML Lesson 2: HTML Tags <font> <body> <h(n)> <hr> <img> html colors Lesson 3: HTML Tags <marquee> <table> List Tags Lesson 4: HTML Tags Formatting tags <frame> superscript bold <a> subscript italic &nbsp; center Lesson 5: HTML Tags Lesson 5: HTML Tags <forms> <style> <span> <div> <style> <span>

  2. Web Page Design Lesson 1: Introduction to HTML

  3. Objectives • Define Web Page Development terms • Understand the Web Structure of a simple web page setup • Know the HTML tags use in the HTML document page structure • Identify the parts of an HTML document • Understand the uses and function of HTML found on the html document page structure • Write a simple HTML document using MS Notepad • Create web pages with mastery of the html codes

  4. Web Structure Site Root Directory (index.htm) Home Page html documents images css xml

  5. Web Terms • HTML - short for Hyper Text Markup Language, the language used in creating documents on the World Wide Web.. • Web Browser - A software that enables the user to view Web pages that are created in HTML codes. • Tags - codes found inside an HTML document. <HTML> </HTML> <HEAD> </HEAD> Opening tags <TITLE> </TITLE> Closing tags <BODY> </BODY>

  6. HTML document Page Structure

  7. Explanation of document structure tags <HTML>...</HTML> Encloses the entire HTML document.These tags let the browser know to start reading and displaying the information presented within. <HEAD>...</HEAD>The <HEAD> element contains all information about the document in general. It contains HTML elements that describe the document's usage and relationship with other documents <TITLE>...</TITLE>The <TITLE> is contained in the <HEAD> of the document. It is displayed at the top of the browser window and on the bookmark list, so it is important to choose something descriptive, unique, and relatively short.

  8. Explanation of document structure tags <BODY>...</BODY> The <BODY> element contains all the information which is part of the document.

  9. Creating and Saving HTML document

  10. Viewing your Web Page HTML document when typed using Notepad HTML codes display when viewed using a BROWSER.

  11. Web Page Design Lesson 2: HTML tag <font> <body> <h(n)> <hr> <img> html colors

  12. Font tag (Text) The text that you are going to use on your web page is controlled by the font tag, SYNTAX: <font>…</font> The <font> tag attributes are: face="font name" size="number“ value=1 smallest to 7 largest color="name or Hex number"

  13. Font tag <Html> <head><title></title></head> <body> <font face="verdana" size=4 color="blue">assumption antipolo</font> </body> </html> save this file under filename:body.htm

  14. HTML color value HTML Color Values HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF). The table below shows the result of combining Red, Green, and Blue light sources:

  15. Body tag The <body> tag is a container where you put text and images you want to appear of your web page. SYNTAX: <body>…</body> The <body> tag attributes are: background="image.gif" bgproperties=“fixed" bgcolor=“color name or Hex number“ text=“color name or Hex number"

  16. Header Tag The <hn> tag is use to format text on your web pages. This tags whose function is to create headings, subheadings titles on your page SYNTAX: <hn>…</hn> The (n) inside the tag represents a number from 1 to 6, which 1 is the largest and 6 is the smallest

  17. Header Tag <Html> <head><title></title></head> <body> <h1>assumption antipolo</h1> <h2>assumption antipolo</h2> <h3>assumption antipolo</h3> <h4>assumption antipolo</h4> <h5>assumption antipolo</h5> <h6>assumption antipolo</h6> </body> </html> save this file under filename:header.htm

  18. Image Tag The <img> tag allows you to add image on your page. SYNTAX: <img> The <img> tag attributes are: src=“path and name of the image file” width=“n" in pixels and in percentage(%) height=“n" in pixels and in percentage(%) border=“n" in pixels. align="center, left or right” alt=“defines a short description of the image title=“gives information about the image

  19. Image Tag <html> <head><title></title></head> <body> <img src="aacopy.gif" width=400px height=400px title="aalogo" alt="aalogo.gif" border=1px> </body> </html> save this file under filename:picture.htm

  20. Horizontal Rule Tag The <hr> tag is used to create a horizontal line on your page. SYNTAX: <hr> The <hr> tag attributes are: width=“n" in pixels size=“n" in pixels. align="center, left or right” noshade color=“name or Hex number”

  21. Horizontal Rule Tag <html> <head><title></title></head> <body> <hr width=200px size=10px noshade color="blue" align="left"> </body> </html> save this file under filename:hr.htm

  22. Web Page Design Lesson 3: HTML tag <marquee> <table> List

  23. Marquee tag The <marquee> display a scrolling text inside your web Page. SYNTAX: <marquee>…</marquee> The <marquee> tag attributes are: width= vertical dimensions.(value is in pixels) height=horizontal dimensions.(value is in pixels) direction=“left, right, up and down“ behavior=“scroll, slide and alternate" scrolldelay & scrollamount=“speed of marquee“ bgcolor=“color name or Hex number“

  24. Marquee tag <html> <head><title></title></head> <body> </body> </html> <marquee>assumption antipolo</marquee> <marquee bgcolor=#ffff00>assumption antipolo</marquee> <marquee width=200px height=200px bgcolor=#ff0000 direction="down">assumption antipolo</marquee> <marquee bgcolor=#00ffff behavior=“alternate">assumption antipolo</marquee> <marquee scrolldelay=50>assumption antipolo</marquee> <marquee scrolldelay=50 scrollamount=100>assumption antipolo</marquee> save this file under filename:marquee.htm

  25. List tags Unordered list - display a bulleted list inside your document page. SYNTAX: <ul>…</ul> <li> refers to the items that will be displayed on your unordered list tag. The <ul> tag attributes: (type=disc default value) type=“square, circle and disc”

  26. List tags <html> <head><title></title></head> <body> -----M E N U----- <!------------unordered list-----------------> <ul type=square> <li>Tinolang Manok <li>Adobong Manok <li>Sinigang na Manok <li>Pritong Manok <li>Manok na ginawang Bola </ul> <!------------end unordered list-----------------> </body> </html> save this file under filename: unordered.htm

  27. List tags Ordered list - display a numbered list of item inside your document page. SYNTAX: <ol>…</ol> <li> refers to the items that will be displayed on your unordered list tag. The <ol> tag attributes: (type=1 default value) type=“1,A,a,I and i”

  28. List tags <html> <head><title></title></head> <body> -----M E N U----- <!------------ordered list-----------------> <ol type=I> <li>Ginataang Isda <li>Pritong Isda <li>Inihaw na Isda <li>Tinapang Isda <li>Isda na ginawang Bola </ol> <!------------end ordered list-----------------> </body> </html> save this file under filename: ordered.htm

  29. List tags Definition list - display a list of terms and definition in your web page. SYNTAX: <dl>…</dl> <dt> refers to the terms that will be displayed <dd>refers to the definition of the term that is displayed.

  30. List tags Definition List Tag

  31. List tags <html> <head><title> definition list tag</title></head> <body> <!--------------definition list tag-----------------> Definition of Terms:<br> <dl> <dt>Web Browser <dd>A software that enables the user to view web pages that are created in HTML codes. <dt>HTML <dd>HTML stands for Hyper Text Markup Language. It is a scripting language whose primary purpose is to create pages that are used on the WWW (World Wide Web). HTML pages or documents consist of codes called Tags embedded in the text of a document. <dt>Tags <dd>are codes in an HTML document which the internet browser reads and then interprets for succeeding display to a reader. An HTML document should always start with the tag [HTML], followed by the [HEAD], [TITLE] and the [BODY] that only occur once. </dl> <!--------------definition list tag end-----------------> </body> </html> save this file under filename:definition.htm

  32. Table tag The <table> specify a container for data the will be viewed as tables inside your web document. SYNTAX: <table>…</table> Inside the <table> tag rows and columns are included: <tr> refers to the table row of the table. <td>refers to the table cell of the table. <th>refers to the table headings (text emphasize).

  33. Table tag The <table> Attributes: Align=“left, center and right” default value is left. bgcolor=“color name or Hex number“ border=“pixels” Specifies the border width. The value="0“ displays table with no border, the default value of the <table> tag. cellpadding =“pixels/%” Specifies the space between the cell walls and contents. cellspacing=“pixels/%” Specifies the space between cells.

  34. Table tag The <table> Attributes: frame =“above, below, hsides, lhs, rhs, vsides, box, border” Specifies which sides of the border side will appear. The "border" attribute can be used in specifying the width of the border. width=“pixels and %” specifies the width size of the table.

  35. Table tag <html> <head><title></title></head> <body> <!--------------table tag-----------------> <table border=5> <tr> <td><img src="aacopy.gif" border=1 width=200px height=200px> </td> </tr> </table> <!--------------table tag end-----------------> </body> </html> save this file under filename: table.htm

  36. Table tag <html> <head><title></title></head> <body> <!--------------table tag-----------------> <table border=5 cellpadding=30px> <tr> <td><img src="aacopy.gif" border=1 width=200px height=200px> </td> </tr> </table> <!--------------table tag end-----------------> </body> </html> save this file under filename: table.htm

  37. Cellpadding=30px The space between the cell walls and the image. Table tag

  38. Table tag <html> <head><title></title></head> <body> <!--------------table tag-----------------> <table border=5 cellpadding=30px> <tr> <td><img src="aacopy.gif" border=1 width=200px height=200px> </td> <td><img src="aacopy.gif" border=1 width=200px height=200px> </td> </tr> </table> <!--------------table tag end-----------------> </body> </html>

  39. Table tag

  40. Table tag <html> <head><title></title></head> <body> <!--------------table tag-----------------> <table border=5 cellpadding=30px cellspacing=30px> <tr> <td><img src="aacopy.gif" border=1 width=200px height=200px> </td> <td><img src="aacopy.gif" border=1 width=200px height=200px> </td> </tr> </table> <!--------------table tag end-----------------> </body> </html>

  41. The spaces between the cell. Cellspacing=30px Table tag

  42. Table tag Colspan Attributes

  43. Table tag <html> <head><title></title></head> <body> <!--------------table tag-----------------> <table border=5 cellpadding=30px> <tr> <td colspan=2 align="center">Assumption Antipolo logo</td></tr> <tr> <td><img src="aacopy.gif" border=1 width=200px height=200px></td> <td><img src="aacopy.gif" border=1 width=200px height=200px></td></tr> <tr> <td colspan=2 align="center">Sumulong Highway, Antipolo City</td></tr> </table> <!--------------table tag end-----------------> </body> </html>

  44. Table tag Rowspan Attributes

  45. <html> <head><title></title></head> <body> <!--------------table tag-----------------> <table border=2 cellpadding=4> <tr> <td rowspan=3><img src="aacopy.gif" width=200px height=200px></td> <td>assumption antipolo</td></tr> <tr> <td>sumulong highway, antipolo city</td></tr> <tr> <td>tel#697-2350</td></tr> </table> <!--------------table tag end-----------------> </body> </html> Table tag

  46. Web Page Design Lesson 4: HTML tag Formatting tags <frame> superscript bold <a> subscript italic &nbsp; center

  47. Formatting tags Formatting tags allow you to add or change the style view of your web page window. <b>…</b> bold <i>…</i> italic <u>…</u> underline <sup>…</sup> superscript <sub>…</sub> subscript <br> line break <p> insert blank space &nbsp; space

  48. Formatting tags <html> <head><title)Formatting tags</title></head> <body> <!---------------formatting tags-----------------> Assum<b>ption Anti</b>polo<br> Assumption <i>Antipolo</i><br> Assumption <u>Antipolo</u><p> Assumption <sup>Antipolo</sup><br> <sub>Assumption</sub> Antipolo<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Assumption Antipolo <!---------------formatting tags end-----------------> </body> </html> Filename:format.html

  49. Frameset tags Frames allow you to subdivide your web page window to multiple windows. SYNTAX: <frameset>…</frameset> The <frameset> tag attributes: cols=“%" rows=“%" border=“n" in pixels. bordercolor="color name or hex number " frameborder="yes"|"no"

  50. Frameset tags The Element Frame Defines a rectangular subspace within a Frameset document. Each FRAME must be contained within a <frameset> that defines the dimensions of the frame. SYNTAX: <frame> The <frame> tag attributes: name=“name”   marginheight =“n" in pixels. marginwidth =“n" in pixels.   bordercolor=“color name or hex number”

More Related