1 / 37

HTML

HTML. Goals. How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation http://www.w3schools.com. Basic Syntax of HTML. <> denotes tags First tag: <html> Most tags require and opening and closing tags to stop

bran
Download Presentation

HTML

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. HTML

  2. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation http://www.w3schools.com

  3. Basic Syntax of HTML • <> denotes tags • First tag: <html> • Most tags require and opening and closing tags to stop • <\html> indicates the closing tag

  4. Start and End of HTML <html> </html> Start and end of HTML <head> </head> Start and end of head section <body> </body> Start and end of body <title> </title> Start and end of title of your page

  5. HTML Tag Rules Whitespace are ignored Beware: HTML does no checking for syntax errors – it interprets what it can and ignores the rest. You will need to be the error checker for yourself

  6. Editing Content • For example: • <b> indicates the following text will be bold • Example: <b> Bold me! <\b> but not me! The result of the above will be: Bold me! but not me!

  7. Basic Structure of HTML Page <html> <head> <title> The Title </title> </head> <body> <b>Test Page</b> with text <body> </html>

  8. Syntax • Headers <h1> Header 1 </h1> <h2> Header 2 </h2> <h3> Header 3 </h3> <h4> Header 3 </h4> <h5> Header 3 </h5> <h6> Header 3 </h6> • Paragraphs <p> Paragraph </p>

  9. More Syntax • Next Line <br> • Changing text <b> bold </b> <i> italics </i> <u> underline </u> • Comment • <!-- Comment Text -->

  10. More Syntax! • &nbsp; space • <marquee> Text scrolling </marquee> • <font color="blue"> Font text </font> • Options: color, face, size • <center> Centered Text </center> • <body bgcolor=“color">

  11. More Syntax! • Horizontal Line • <hr> • Changing Font • <font> Change the font of this text </font> • Changing font has many different attributes • Other tags also have attributes

  12. Attributes of Tags • <font color=“blue”> Blue text </font> • <font size=“1”> small text </font> • <font face=“Arial”> Arial text </font> • You can put all attributes into one tag: • <font color=“blue” size=“1” face=“Arial”> Changed text font</font>

  13. Deprecated Tags • <b>, <u>, <i> have been deprecated • HTML wasn’t meant to be about styling • This is why we have CSS • Instead use <strong>and <em> • For <font>, we have to use <span> with CSS

  14. Deprecated Tags cont. “In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.” “Avoid using the elements: <font>, <center>, and <strike>, and the attributes: color and bgcolor.” *From http://www.w3schools.com/html/html_css.asp http://www.tutorialspoint.com/html/html_deprecated_tags.htm

  15. Making an Image Your Background • For color: <body bgcolor=“color"> • For background image: <body background="bgimage.jpg">

  16. Linking Web Pages • <a href=“url_here”> Link Text </a> • The URL can be a page you created or an external link (MUST HAVE HTTP) • <a href=“aboutme.html”> About Me </a> • <a href =“http://www.mtsu.edu”> MTSU </a> MTSU

  17. Useful Attributes for Links • Target=“_blank” – opens the link in a new window • Title=“” – the alt text of the link • Can anchor pages: • <a name=“myanchor"></a>  • Click <a href="#myanchor">here</a> to go to the anchor. 

  18. Lists • Two types of lists • Ordered: • First entry • Second entry • Third entry • Unordered • Entry • Entry • Entry

  19. Ordered Lists <ol> <li> First Entry </li> <li> Second Entry </li> <li> Third Entry </li> </ol>

  20. Order List Attributes • Compact – less space between lines and indentation • <ol compact="compact"> • Start – specifies the start number • <ol start="50"> • Type – specifies the type of order (1, A, a, I, i) • <ol type="I">

  21. Unordered Lists <ul> <li> Entry </li> <li> Entry </li> <li> Entry </li> </ul>

  22. Unordered Lists Attributes • Compact • <ul compact="compact"> • Type (disc, square, circle) • <ul type="square">

  23. Lists Within Lists <ol> <li> First Entry </li> <ul> <li> Sub Entry </li> <li> Sub Entry </li> </ul> <li> Second Entry </li> <ul> <li> Sub Entry </li> </ul> <li> Third Entry </li> </ol> • First Entry • Sub Entry • Sub Entry • Second Entry • Sub Entry • Third Entry

  24. Inserting Images • Two ways to insert: • Put the Internet link • Download the image, link it • <imgsrc=“www.some_site.com/image.jpg” /> • <imgsrc=“image.jpg” />

  25. Making a Picture a Link <a href=“url”> <imgsrc=“image.jpg” /> </a>

  26. Attributes of Inserting Images Alt – the alternative text of the picture this shows up when you scroll over an image Width – specifies the width of the image Height – specifies the height of the image Align – specifies the alignment (top, bottom, middle, left, right) (Going to use CSS for this) <imgsrc=“image.jpg" alt=“My Picture" width="304" height="228" />

  27. What is the Difference? • Saving: have to download the image • Include the location and image name. • Link: You just include the URL • Taking up the resources of whatever site you got the link from

  28. Tables <table> </table> : Start and end of the table <tr> </tr> : Start and end of a row <th> </th> : Start and end of a header cell <td> </td> : Start and end of a table data cell

  29. Tables <table> <tr> <th> Header 1 </th> <th> Header 2 </th> </tr> <tr> <td> Data 1 </td> <td> Data 2 </td> </tr> </table>

  30. Attributes of Tables Table: align, bgcolor, border, cell padding, cell spacing, frame, rules, summary, width th and td: abbr, align, axis, bgcolor, char, charoff, colspan, height, nowrap, rowspan, scope, valign, width tr: align, bgcolor, charoff, valign

  31. The <span> tag Instead of <center> : <p style=“text-align:center;”> Centered Text </p> Or <h1 style=“text-align:center;”> Centered Header </h1>

  32. The <span> tag cont. Instead of <font color=“blue>:<span style=“color:red;”> Text </span> For multiple attributes:<span style="font-family:arial;color:red;font-size:20px;"> Text </span> Can also be applied to other tags:<p style="font-family:arial;color:red;font-size:20px;">

  33. For Background Color <body style="background-color:yellow;"> Background Image: <body style="background-image:img.jpg;"> Background of a Header or other tag:<h2 style="background-color:red;">Heading 2</h2><p style="background-color:green;">This is a paragraph.</p>

  34. Extra Stuff • Marquee - http://www.quackit.com/html/codes/html_marquee_code.cfm • Embed Youtube videos: • Go to a youtube video: http://www.youtube.com/watch?v=jofNR_WkoCE • Click Share, next to About • Click Embed, next to Share this video • Copy the text and paste into your website

  35. Changing your Webpage Layout • Div: http://www.w3schools.com/html/html_layout.asp • Div stands for division: • Menus and Sidebars and more

  36. Using Divs You can divide up your page to create banners, sidebars, main content, footers, headers, etc. http://www.mtsu.edu/ https://cs.mtsu.edu/~mw3n/ http://w3schools.com/css/tryit.asp?filename=trycss_float6

  37. Styles to use with Div Width – specifies the width of the division Height – specifies the height of the division Color – color of the text inside the division Background-color Background-image Display Float Text-Align

More Related