Scribd
Upload
87 views

Chapter Three: HTML Basic

The document provides an overview of basic HTML elements and tags for formatting text, adding images and links, and structuring pages using headings, lists, tables, and more. It explains key tags such as <b>, <i>, <img>, <a>, <ul>, <ol>, <table>, <tr>, and <td> and provides examples of how to use them to bold and italicize text, insert images with alternative text and borders, create internal and external links, and construct bulleted and numbered lists. It also covers more advanced topics like setting image dimensions and alignment, adding backgrounds, and creating tables with rows and columns.

Uploaded by

Bereket Habte
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
87 views

Chapter Three: HTML Basic

The document provides an overview of basic HTML elements and tags for formatting text, adding images and links, and structuring pages using headings, lists, tables, and more. It explains key tags such as <b>, <i>, <img>, <a>, <ul>, <ol>, <table>, <tr>, and <td> and provides examples of how to use them to bold and italicize text, insert images with alternative text and borders, create internal and external links, and construct bulleted and numbered lists. It also covers more advanced topics like setting image dimensions and alignment, adding backgrounds, and creating tables with rows and columns.

Uploaded by

Bereket Habte
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

CHAPTER THREE

HTML BASIC

Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information within documents. TAGS

To tell the browser that an "A" should be bold we need to put a markup in front of the A. Such a markup is called a Tag. All HTML tags are enclosed in < and >. Example: a piece of text as it appears on the screen. This is an example of bold text. HTML: the HTML for the above example: This is an example of <b>bold</b> text. PAGE STRUCTURE All normal webpage consist of a head and a body. Head

Body

The head is used for text and tags that do not show directly on the page.

The body is used for text and tags that are shown directly on the page. The most basic code - the code you will use for any page you make, is shown below: <html> <head> </head> <body> </body> </html>

HEAD SECTION 1

The head section of the webpage includes all the stuff that does not show directly on the resulting page. The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded. BODY SECTION The body of the document contains all that can be seen when the user loads the page. TEXT FORMAT <b>text</b> <i>text</i> <u>text</u> <sub>text</sub> <sup>text</sup> writes text as bold writes text in italics writes underlined text lowers text and makes it smaller lifts text and makes it smaller

Heading- Used represent texts in different heading or size.


There are h1, h2,, h6 headings. <h1>Heading 1</h1> <h2>Heading 2</h2> . . <h6>Heading 6</h6>

HTML LIST To create a bulleted list you need to add a <ul> and a </ul> tag at the beginning and the end of the list. Numbered lists have <ol> tags instead of <ul> tags. To separate single list items use <li> and </li> tags. BULLETED LISTS This page shows how to make different kinds of bulleted lists. You have the following bullet options:

disc circle squareLook at these examples to see the detailed syntax.

HTML-CODE <ul> <li>text</li> <li>text</li> <li>text</li> </ul>

EXPLANATION / EXAMPLE Makes a bulleted list using the default bullet type:

text text

text Starts a bulleted list using discs as bullets:


<ul type="disc">

This is one line This is another line

And this is the final line Starts a bulleted list using circles as bullets: <ul type="circle">
o o o

This is one line This is another line

And this is the final line Starts a bulleted list using squares as bullets: <ul type="square">

This is one line This is another line And this is the final line

NUMBERED LISTS This page shows how to make different kinds of numbered lists. You have the following number options:

Decimal numbers Capital Letters Small Letters Capital Roman Numbers Small Roman Numbers In addition to these options you can specify at which number the list should start. The default start value for numbered lists is at number one (or the letter A). Look at these examples to see the detailed syntax.

HTML-CODE <ol> <li>text</li> <li>text</li> <li>text</li> </ol>

EXPLANATION / EXAMPLE Makes a numbered list using the default number type: 1. text 2. text 3. text Starts a numbered list, first # being 5. 5. This is one line 6. This is another line 7. And this is the final line Starts a numbered list, using capital letters.

<ol start="5">

<ol type="A">

A. This is one line B. This is another line C. And this is the final line Starts a numbered list, using small letters.

<ol type="a">

a. This is one line b. This is another line c. And this is the final line Starts a numbered list, using capital roman numbers.

<ol type="I">

I. II.

This is one line This is another line

III. And this is the final line Starts a numbered list, using small roman numbers. <ol type="i"> i. ii. This is one line This is another line

iii. And this is the final line Starts a numbered list, using normal numbers. <ol type="1"> 1. This is one line 2. This is another line 3. And this is the final line An example of how type and start can be combined. VII. VIII. 4 This is one line This is another line

<ol type="I" start="7">

IX.

And this is the final line

HTML IMAGES

This section will show how to add images to your pages. We will start out with a presentation of the two main image types on webpages: jpg and gif. After that, we will proceed with various ways to insert and customize images, with a special focus on the different alignments you can choose.

GIF & JPG Computers store images in several different ways. Some storage methods focus on compressing the size of the image as much as possible. A major problem with using images on websites is that images take much longer to load than text. To reduce download times as much as possible two of the best image compressing formats used on the web is: GIF JPG 256 colors Unlimited colors Can handle transparent areas Can't handle transparent areas Excellent for compressing This format is not good at photographs and complex compressing photographs images In general, it is excellent for In general, it is not good for banners, buttons and clipart banners, buttons and clipart. This means that:

Banners, buttons, dividers, clipart and other simple images usually work best as GIF's. Photographs and other complex images usually work best as JPG's. INSERTING IMAGE Here is the HTML code used to insert the image on this webpage: 5

<img src="http://www.echoecho.com/rainbow.gif"> If the image is stored in the same folder as the HTML page, you can leave out the domain reference (http://www.echoecho.com/) and simply insert the image with this code: <img src="rainbow.gif"> RESIZING <img src="rainbow.gif" width="120" height="120"> If you leave out the settings for width and height, the browser will automatically use the real size of the image. BORDER AROUND You can add a border to the image using the border setting shown in the example below: <img src="http://www.echoecho.com/rainbow.gif" border="5"> ALTERNATIVE TEXT You can add an alternative text to an image using the alt setting shown in the example below: <img src="http://www.echoecho.com/rainbow.gif" alt="This is a text that goes with the image"> HTML LINKS Links are the most fundamental part of the World Wide Web. It is the links that tie it all together. There are three different kinds of links you can have on your website:

Links to anchors on the current page (Internal). Links to pages outside the current site (Global).

HOW TO MAKE A LINK The tags used to produce links are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends. The example below shows how to make the word here work as a link to yahoo.

Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

IMAGE LINKS If you want to make an image work as a link, the method is exactly the same as with texts. You simply place the <a href> and the </a> tags on each side of the image. Below is the HTML code used to make the image work as a link to a page called myfile.html <a href="myfile.htm"><img src="rainbow.gif"></a> If you haven't entered a border setting you will see a small border around the image after turning it into a link. To turn off this border, simply add border="0" to the <img> tag: <a href="myfile.htm"><img src="rainbow.gif" border="0"></a> LINK TO NEW EXTERNALWINDOW If you want your link to open a page in a new window use the target="_blank" in the <a href> tag. Targeting the link to "_blank" simply opens a new browser window that will load the linked page. Linking to Yahoo the traditional way would r equire this link: <a href="http://www.yahoo.com">Go to Yahoo</a> If you add a target="_blank", the page will open in a new window: <a href="http://www.yahoo.com" target="_blank">Go to Yahoo</a> LINK TO EMAIL Having a link that allows visitors to send email from your website can be a great addition to your site, making it easy for your visitors to send questions or comments. An email link would require the following code: <a href="mailto:youremailaddress">Email Me</a> Example: <a href="mailto:[email protected]>Email Me</a> Marquee- is an HTML element used to add motion to texts and graphic objects on the page. <marquee behavior=left/right/alternate height=80 width=1000> 7

A text or picture to have motion </marquee>

HTML BACKGROUNDS If you want to add a background image instead of a plain color there are some considerations you should make before doing so: <body background="drkrainbow.gif">

<body background="drkrainbow.gif" bgcolor="#333333"> HTML TABLES Tables are used on websites for two major purposes:

The obvious purpose of arranging information in a table The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables. Tables are defined with the <table> tag. To insert a table on your page you simply add these tags where you want the table to occur: <table> </table>

The above table would be of no use since it has no rows and no columns. ROWS: To add rows to your table use the <tr> and </tr> tags. <table> <tr></tr> <tr></tr> </table> It doesn't make sense to write the above lines in itself, cause you can't write content outside of table cells. If you do write things outside of cells it will appear right above the table. COLUMNS You can divide rows into columns with <td> and </td> tags: Example: <table boarder=4 boardercolor=green> <tr> <td>This is row one, left side.</td> 8

<td>This is row one, right side.</td> </tr> <tr> <td>This is row two, left side.</td> <td>This is row two, right side.</td> </tr> </table>

You might also like