[go: up one dir, main page]
Scribd
Upload
10 views6 pages

HTML Basics Lab Exercise Guide

This document provides instructions for a lab exercise on the basics of HTML. The objective is to demonstrate HTML syntax. Students are instructed to create an HTML file using tags like <html>, <head>, <title>, <body>, <h1>, <p>, <h2> to develop the structure and content of a basic web page. They then view the page in a web browser. Additional tasks have students add line breaks, comments, and spaces between elements and introduce ordered and unordered lists.

Uploaded by

vraj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views6 pages

HTML Basics Lab Exercise Guide

This document provides instructions for a lab exercise on the basics of HTML. The objective is to demonstrate HTML syntax. Students are instructed to create an HTML file using tags like <html>, <head>, <title>, <body>, <h1>, <p>, <h2> to develop the structure and content of a basic web page. They then view the page in a web browser. Additional tasks have students add line breaks, comments, and spaces between elements and introduce ordered and unordered lists.

Uploaded by

vraj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

IST 1020: INTRODUCTION TO INFORMATION

SYSTEMS

LAB EXERCISE: INTRODUCTION TO HTML

Objective
The purpose of this lab is to demonstrate the basics Syntax of HTML.

Requirements
1. Notepad
2. Web Browser
Introduction
Hyper Text Markup Language-HTML

Html is a document that contains text

Web browsers read and display documents that contain html


It’s all about tags in HTML

<>: Angle brackets containing Tag


<Body> something inside here </Body> -Markup Elements
<Br>: This is line break – Empty Elements

Task 1: CREATE THE PAGE


<! Doctype html> : tells the browser what type of document to open
<Html>: this tells the browser where the html starts and ends.
<Head>: contains information about the title or language of the page
<Title> My First Web page </Title>
</Head>
<Body>: This the primary section of your web page
<h1>: The Fish web Site </h1>
<p> Welcome to the fish web site. Everything you want to know about
fish is this web site. </p>
<h2> This is a section on Bass fish </h2>
<p> Bass fish lives in lake </p>

1
</Body>
</html>
Open Notepad;

1. Create a HTML document that looks like below

2. Click on File, then Save As. Select Desktop.


3. Under File Name, type MyFirstPage.html. Under Save as Type, Select All Files “.” and click
on Save.

2
Task 2: View the Page
Navigate to Desktop and click on the html file you just created. You should have something
similar to below

Task 3: HTML - Line Breaks, Spacing, and Comments


PAGE BREAKS
Use the Br (line brakes) tag to add spaces between your paragraphs.

1. Use <Br> tag to add spaces between paragraphs 1 and 2 in your page.

3
Comments
We use the following tag to add comments in our html codes; <!—this is the start of html for the second
section -->

2. Enter the above code as shown below.

Inserting Spaces
We use the tag “&nbsp” to insert spaces between text

3. Add space between the first paragraph and the page break as shown below.

Task 4: Ordered and Unordered lists


In this exercise, you will learn how to order your document using ordered and unordered list.

4
Ordered List
1. Add the below code to your html document

2. Run your document on the browser. You should have something similar to this

Unordered List
3. Add the below code to your html document just below the ordered list.

5
4. Run your document on the browser. You should have something similar to this

You might also like