1 / 11

Comprehensive Guide to HTML: Special Characters, Images, Lists, Hyperlinks, Tables, and More

This guide offers an in-depth overview of essential HTML concepts for Class 3 students. Learn about special characters, including how to use the <img> tag for images and the various types of lists (ordered and unordered). Understand hyperlinks to external sources and emails, as well as how to create tables with attributes, merging cells, and frames. This resource emphasizes practical examples, allowing students to apply their knowledge effectively in web development projects.

infinity
Télécharger la présentation

Comprehensive Guide to HTML: Special Characters, Images, Lists, Hyperlinks, Tables, and More

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 (Hypertext Markup Language) – Class 3 • Recap: • HTML Special Characters (ex: &copy;). • Including Images – using the <img> tag. • Lists – Ordered and Unordered lists. • Hyperlinks – to external sources and within a document. • Links to emails ?? • Tables

  2. Links to Emails • Links to an email: Ex: <a href="mailto:alarrayed@itc.uob.bh"> Mail Me!</a> • If you want to specify a subject name: Ex: <a href= "mailto:alarrayed@itc.uob.bh?Subject=Test"> Mail Me!</a>

  3. A simple table <table border="1"> <tr> <td>ITBIS211</td> <td>ITBIS311</td> <td>ITBIS499</td> </tr> <tr> <td>90 students</td> <td>60 students</td> <td>55 students</td> </tr> </table>

  4. Table <table> attributes • Use the border attribute to have a boarder around your table. • Ex: <table border=0>: invisible table • Use the cellpadding attribute to increase the spacing within cells. • Ex: <table border=2 cellpadding=12> • Use the align attribute to control the alignment of the table in the page • <table align=center>

  5. Cont. <table> attributes • Use the width and height attributes to indicate the final width and height values in a table. • The values used can be either in pixels or percentage (of the total visible area). • Ex: <table align=center width="100%”> • Use background or bgcolor to change the table (or cell <td>) background image color.

  6. Tables: Merging Cells • To merge cells, we use the table data attributes colspan and rowspan along with a value. • colspan= 2: two table data (columns) in a specific row are going to be merged. • Ex: <td colspan=2>Cancelled</td> • rowspan = 3: three rows will be merged. • Ex: <td rowspan=3> three rows are used </td>

  7. Merging Cells: Example <table border="1"> <tr> <td>ITBIS211</td> <td>ITBIS311</td> <td>ITBIS499</td> </tr> <tr> <td>90 students</td> <td colspan=2> Cancelled</td> </tr> </table>

  8. Frames • A framed page is a page split into 2 or more sections, each containing its own html document. • A frameset tag is needed to define frames. • Ex: <frameset rows="10%, *"> <frame name=menu src=menu.htm> <frame name=main src=webpage.htm> </frameset> • A frameset tag is defined after the head tag – no need for a body.

  9. Cont. Frames • Use the rows or cols attributes to divide the page. • The values are either in pixel or percentage • To open a link in a another page, use the target attribute in the anchor tag. • Ex: <a target="main“ href="http://www.uob.edu.bh">UoB </a> • You can also use the _new and _self targets

  10. Forms • The forms material will be distributed in another handout.

  11. Div and Span

More Related