Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Lab2_HTML

Uploaded by

Hanif Abdillah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Lab2_HTML

Uploaded by

Hanif Abdillah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

INTRODUCTION TO HTML

By the end of this section of the practical, the students should be able to:

Describe the concept and structure of HTML and XHTML


Construct XHTML pages with basic Tags, Formatting, Links, Tables, Lists,
Forms, Images Syntax.
Organizing files, names & folders in a cPanel hosting account.
Upload files and publish a web page using FTP manager.

1 Introduction

HTML stands for Hyper Text Markup Language. HTML which provides a means to create
structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. It allows images and objects to be
embedded and can be used to create interactive forms. It is written in the form of HTML
elements consisting of "tags" surrounded by angle brackets within the web page content.
It can embed scripts in languages such as JavaScript and PHP which affect the behaviour
of HTML webpages.

File Transfer Protocol (FTP) is a standard network protocol used to download or upload
a file from one host to another over a TCP/IP-based network, such as the Internet. If you
are a novice webmaster, an ftp client will most certainly be in your web authoring toolset.

1
1.1 INTRODUCTION TO HTML

HTML is written in plain text. That means you can use any simple text editor to create a
HTML document. Even if you're using a program to create websites, such as
Dreamweaver, a basic knowledge of HTML can help you design and modify your website
better. HTML element is an individual component of an HTML document. For example,
the title element represents the title of the document. Generally elements consist of a ‘start
tag’< > with or without one or more attributes, some content and an ‘end tag’ </ >.

All HTML documents are divided into two main parts: the head and the body as shown
below.

You are going to code your first HTML page. Create a folder named with your student
name in D: directory. (You must avoid using blank space for your folder and file names).
This folder will be used to store all the files you create during this practical.

2
1.1.1 First HTML Webpage.

1. Launch a text editor Notepad from your program list. Start off by saving it into your
working folder. Name it as ‘mysite.html’. Remember to select ‘All Files’ for the Save
as type field.

3
2. Type down these codes and save your document.

3. Launch your browser (such as Internet Explorer, Firefox or Chrome) and type down
the location of your HTML document in the address bar. Press Enter key.
Congratulations! You have successfully completed your first web page.

4. Examine your HTML code carefully. The <html> and </html> tags tell your

browser that this is the start of an HTML document. Header information is not
displayed in the browser window. However, the text between the <title>…. </title>
tags is the title of your document. The title is text that appears in the title bar at the

top of the browser window. The <body> pair tags specify the document’s content that

will be displayed in your browser.

4
5. Now you are going to add more content. Type down these codes below.

6. Save your HTML document and refresh your browser. You will get the result below.

7. You have added headings for your content <h1> and <h2>, horizontal line
<hr>and some paragraphs <p>.

5
8. To display an image on your webpage, you must first make sure an image file is
located inside your working folder.

9. Add this code below in your HTML document.

10. Save your HTML file and refresh your browser. You will get the result below.

6
11. Notice the <img> tag has alt, width and height attributes which generally used
for elements formatting.

12. Hyperlinks are found in nearly all Web pages. Links allow users to click their way
from page to page. To create your first hyperlink, insert this code below.

13. Save and refresh your page in the browser. Below is the result when a content is placed
between the <a> pair tags. Click the link to navigate to an external website.

7
1.1.2 Tables

1. Understand: tables have rows and columns. Use <TABLE> tags to create a table. Use
<TR> tags for rows, and <TD> tags for columns. Note that a column is in a row, and
the number of columns in each row must be the same.
2. Creating a table with two rows:

<table border= “1”>


<tr><td> first row </td></tr>
<tr><td> second row </td></tr>
</table>

3. Creating a table with two columns:

<table border= “1”>


<tr>
<td> first column</td>
<td> second column</td>
</tr>
</table>

4. Filling in colours to a 2 x 2 table:

<table>
<tr>
<td bgcolor= yellow> which</td>
<td bgcolor= red> state’s</td>
</tr>
<tr>
<td bgcolor= red> flag</td>
<td bgcolor= yellow> is this??</td>
</tr>
</table>

8
5. Setting the width of the table (set the table width to 500 pixels):
<table width= “500”>

6. Setting the table width according to browser size (set the table width as the same
width of the browser):
Try: resize your browser and see what happens
<table width = “100%”>

7. Setting the size of column width and row height:

<tr height= “10”>


<td width = “200”> row height 10, column width 200</td>
</tr>

8. You might want to have a title in your column and row. For example column for
name and extension phone number as the table.

List of Extension Number for Staff


Extension
Name
Number
Kamal Azaini 3021
Suraya Ahmad 3050
Mazuin Zaini 3040

In HTML, use <TH> to create a title for the column.

<table border= “1”>


<tr> <th > name </th> <th> ext. number </th> </tr>
<tr> <td> kamal azaini</td> <td> 3021 </td> </tr>
<tr> <td> suraya ahmad </td> <td> 3050 </td> </tr>
<tr> <td> mazuin zaini </td> <td> 3040 </td> </tr>
</table>

9
9. Inserting colspan attributes:

<table border=”2” >


<tr> <td colspan=”2”> production </td> </tr>
<tr> <td> muhaimin </td> <td> 632 </td> </tr>
<tr> <td> muadzmin </td> <td> 259 </td> </tr>
<tr> <td> izzat </td> <td> 365 </td> </tr>
</table>

10. Inserting rowspan attributes:

<table border=”1”>
<tr>
<td rowspan=”3”> production </td>
<td> muhaimin </td> <td> 632 </td>
</tr>
<tr>
<td> muadzmin </td> <td> 259 </td>
</tr>
<tr>
<td> izzat </td> <td> 365 </td>
</tr>
</table>

10
1.1.3 More standard HTML Elements

1. Download greenshoppers.zip into your work folder. Right click and choose Extract
Files to unzip the content. Access to the files inside greenshoppers folder.

2. Open index.html in your browser. Click the other links provide in the webpage.

11
3. When you click the hyperlinks, you’re actually accessing to multiple HTML
document in the same folder.

4. View the about.html code in Notepad and examine that the hyperlinks are formatted
in lists with <li> pair tags. Modify the unordered list tags <ul> into ordered list
instead <ol> and refresh your browser to see the changes.

12
5. View the product.html code in Notepad and observe how tables are formatted based
on number of rows <tr> tags and columns <td> tags.

6. View the contact.html code in Notepad and study how inactive forms objects are
inserted in the HTML document.

7. To add forms, you must first start with the <form> tag. Nested inside it are form
objects such as text field <input> with attribute type text, radio buttons <input>
with attribute type radio, check boxes <input> with attribute type checkbox,
text area <textarea> and buttons <button>.

13

You might also like