1 / 24

WEB PAGES: CREATING AND MAINTAINING **

WEB PAGES: CREATING AND MAINTAINING **. HTML Tags to format your text. Instructor: E-mail: Web page:. Cajee Cordeiro Cordeicf@Udel.Edu http://udel.edu/~cordeicf. On ALL Web Pages. <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY>. Basic HTML Tags. Note!.

mignon
Télécharger la présentation

WEB PAGES: CREATING AND MAINTAINING **

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 PAGES: CREATING AND MAINTAINING ** HTML Tags to format your text Instructor: E-mail: Web page: Cajee Cordeiro Cordeicf@Udel.Edu http://udel.edu/~cordeicf

  2. On ALL Web Pages <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> Basic HTML Tags

  3. Note! largest • Always on it’s own line ! <H4>HEADING</H4> smallest <H2>HEADING</H2> THE HEADING TAG <H1…6> </H1…6> <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> HEADING HEADING <H5> </H5> <H6> </H6>

  4. THE HEADING TAG <H1…6> </H1…6> Tag Options This is Centered This is left This is right ALIGN = “left, right, center” <h2 align=“center”>This is centered</h2> <h1align=“left”>This is left</h1> <h2 align=“right> This is right </h2> <P align=“Left”> <P align=“Right”> <P align=“Center”> <FONT size=“1…7” color=“color name”>

  5. Paragraph Tag <P> </P> Tag Options ALIGN = “Left, Right, Center” Default <P align=“left”> <P align=“right”> <P align=“center”> <P align=“center”>This text will be centered</P>

  6. Break Tag <BR> No Tag Options Starts a new line Similar to a carriage return but does not start a new paragraph Does not need to be “closed” This is the first line This is the next line This is the first line <BR> This is the next line

  7. Main Heading All of this paragraph is centered on the page <h1 align = “center”> Main Heading </h1> <p align=“center”> All of this paragraph<br> is centered on the page <br> </p>

  8. Text Formatting Tags <B> </B> - bold <I> </I> -italic <U> </U> -underline rd e.g. Today is September 23 Basic HTML Tags <SUB> </SUB> = Subscript e.g. H2O H<sub>2</sub>O <SUP> </SUP> = Superscript Today is September 23<sup>rd</sup>

  9. Formatting Tags < P > < /P > < BR > <B> < /B > < I > < /I > <U> </U> <SUB> </SUB> <SUP> </SUP> Basic HTML Tags &nbsp; non-breaking space This is one space, but this has extra spaces. This is one space, but &nbsp; &nbsp; &nbsp; this has extra spaces.

  10. Main Heading All of this paragraph is centered on the page <h1 align = “center”> <u>Main Heading <u></h1> <p align=“center”> All of &nbsp; <b> this paragraph </b><br> is <u><i> centered </i></u> on the page <br> </p>

  11. THE FONT TAG <FONT> </FONT> Tag Options SIZE COLOR FACE

  12. smallest largest THE FONT TAG <FONT> </FONT> Tag Options SIZE = “1 … 7” <FONT size=“1”> This is Large <FONT size=“2”> Default <FONT size=“3”> This is <font size=“7”>Large</font> <FONT size=“4”> <FONT size=“5”> Opposite to the Heading tag <FONT size=“6”> <FONT size=“7”>

  13. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow THE FONT TAG <FONT> </FONT> Tag Options color = “one of 16 standard colors” <FONT color=“red”> This is: red and blue This is: <font color=“red”>red</font> and <font color=“blue”>blue</font>

  14. THE FONT TAG <FONT> </FONT> Tag Options This is Large & Green This is <FONT size=“7” color=“green”>Large & Green</FONT> This is <FONT size=“7”><font color=“green”>Large & Green</font></FONT> Options may be grouped or distributed Tags should be “nested”

  15. This is Large & Green This is <FONT size=“7”><font color=“green”>Large & Green</font></FONT> This is Large & Green only large This is <FONT size=“7”><font color=“green”>Large & Green</font>only large</FONT>

  16. THE FONT TAG <FONT> </FONT> Tag Options FACE = “name1, name2, name3, …” ThesearedifferenttypesofFont Faces

  17. THE FONT TAG <FONT> </FONT> Tag Options FACE = “name1, name2, name3, …” • Browsers have VERY limited “Font Face” Support • The “Font Face” file must reside on the Users Computer • Name must match – might not look the same – MAC’s -PC’s

  18. arial arial black comic sans ms courier courier new georgia helvetica impact palatino times new roman trebuchet ms verdana THE FONT TAG <FONT> </FONT> Tag Options FACE = “name1, name2, name3, …” These 12 fonts are installed on both PC and MAC and are considered as ‘safe’

  19. arial arial black comic sans ms courier courier new georgia helvetica impact palatino times new roman trebuchet ms verdana Serif Sans-serif cursive fantasy monospace THE FONT TAG <FONT> </FONT> <FONT face = “verdana, helvetica, sans-serif”>Hello</FONT> Tag Options FACE = “name1, name2, name3, …” Font-Family generic-Family

  20. Fonts – Let’s Practice • Make a web page for: • Welcometo myWeb PageI did it myself Bold, blue, size = 4, underline Italic, Underline blue, size = 3 Arial, size = 3 Color= “red” ` Welcome to <u> <i> my</i> <font size=“4” color = “blue”>Web Page</font></u>&nbsp; <FONT face = “arial”> I did it <font color = “red”> myself </font> </FONT>

  21. THE HEADING TAG <H1…6> </H1…6> Tag Options This is Centered This is left This is right ALIGN = “left, right, center” <h2 align=“center”>This is centered</h2> <h1align=“left”>This is left</h1> <h2 align=“right”><font color = “red” face = “arial”> This is right </font ></h2> Can “nest” font color and face in the heading tag

  22. THE BODY TAG <body> </body> Tag Options BGCOLOR background color TEXT default text color TOPMARGIN (pixels) LEFTMARGIN (pixels) RIGHTMARGIN (pixels) <body bgcolor= “yellow” text= “blue” leftmargin = “25” topmargin = “100”> Can use font tag to specify size, color and face after the body tag

  23. EXAMPLE <body bgcolor = “color”, text = “color”, topmargin = “x”…> <font color = “color” face = “type” size = “x”> <hn> <font color = “color” face = “type”> Heading text </font> </hn> <p align = “location”> <font color = “color” face = “type” size = “x”> paragraph text </font > </p> </font> </body>

  24. Basic HTML Tags On ALL Web Pages Formatting Tags <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> <P> </P> <BR> <FONT> </FONT> <H1>… <H6> to </H1>… </H6> <B> </B>, <I> </I>, <U> </U> <SUP> </SUP>, <SUB> </SUB> &nbsp; Tag Options <P align=“Left”> <P align=“Right”> <P align=“Center”><FONT size=“1…7” color=“color name” face=“name1, name2, name3, …> Colors – aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

More Related