Posted by

HyperText Markup Language (HTML)

Introduction to HTML


The World Wide Web (WWW) is the set of computers on the internet that support HyperText Transfer Protocol (HTTP), which is the language used by a WWW client to request documents from a WWW server. Thus, HTML is the language used to design web pages.


Every HTML must have the following elements:

  • DOCTYPE: rules for the markup languange
  • HTML: defines the whole document
  • HEAD: title element required
  • BODY: HTML attributes and attribute values
  • ELEMENTS INSIDE BODY: remaining HTML element


Example of Elements in Body:
Block-Level Elements

• Lists
– <ol> - defines ordered list
– <ul> - defines unordered list
– <li> - defines list item
– <dl> - defines a definition list
– <dt> - defines an item in a definition list
– <dd> - defines a description of an item in a definition list

• Tables and Forms

Headings

• Heading Types
– <H1>…..</H1>
– <H2>…..</H2>
– <H3>…..</H3>
– <H4>…..</H4>
– <H5>…..</H5>
– <H6>…..</H6>

• Attributes:ALIGN
– Values: LEFT (default), RIGHT, CENTER

• Nesting tags
– Heading and other block-level elements can contain text-level elements, but not vice-versa

P-The Basic Paragraph

• Attributes: ALIGN
– LEFT (default), RIGHT, CENTER
– Whitespace ignored (use <BR> for line break)

• Consecuitve <P>’s do not yield multiple blank lines
– End Tag is Optional

Ordered List

• OL Element
– <OL>
<LI>….
<LI>…
……
</OL>
– Attributes: TYPE, START, COMPACT
• List entries: LI
– <LI..> ….</LI> (End Tag Optional)
– Attributes: (When inside OL) VALUE, TYPE
A sample list:
<OL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</OL>

Unordered Lists

• UL Element
– <UL>
<LI>….
<LI>…
……
</UL>
– Attributes: TYPE, COMPACT
• TYPE is DISC, CIRCLE or SQUARE
• List entries: LI (TYPE)
– TYPE is DISC, CIRCLE or SQUARE
A sample list:
<UL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</UL>

IMG; Embedding Images

• Example
<img src=“SomeFile.gif” alt=“My Cat”
width=“400” height=“300”>
• Attributes:
– src (required)
– alt (technically required)
– width, height
– border

TABLE Element Attributes

•ALIGN
•BORDER
•CELLSPACING
•CELLPADDING
•WIDTH

TR: TABLE Row

•TR is used to define each row in the table
•Each row will then contain TH and/or TD entries


Example of Elements Input of HTML :

<html>
<body>
<h1> Alkyne is All Kind </h1>
<h4>
Group members:
</h4>
<ul type="disc">
<li>6 members</li>
</ul>
<h4>About Us:</h4>
<table border="1" bgcolor="blue" cellpadding="10">
<tr>
<td>NAME</td>
<td>MATRIC NO</td>
<td>COURSE</td>
</tr>
<tr>
<td>Nabilah Khairi</td>
<td>1617650</td>
<td>Applied Chemistry</td>
</tr>
<tr>
<td>Mehiran Shafikah</td>
<td>1611198</td>
<td>Applied Chemistry</td>
</tr>
<tr>
<td>Mawaddah MSJY</td>
<td>1614690</td>
<td>Applied Chemistry</td>
</tr>
<tr>
<td>Zakiah Zakaria</td>
<td>1611602</td>
<td>Applied Chemistry</td>
</tr>
<tr>
<td>Nabila Zain Khairi</td>
<td>1613958</td>
<td>Applied Chemistry</td>
</tr>
<tr>
<td>Nazatul Najihah</td>
<td>1617890</td>
<td>Applied Chemistry</td>
</tr>
</table>
<p>
Teammate:
<img src="kami.jpg" alt="Happy Face" width="300" height="300"/>
</p>
<p>
Be happy:
<img src="meow.gif" alt="Computer Man" width="300" height="300"/>
</p>
</body>
</html>


That's all from us! Adios, and see you again!

Comments

Post a Comment