Introduction to HTML
Introduction to HTML
To familiarize the students with
- HTML page structure
- Text formatting in HTML
- Lists in HTML
- Add images to web pages
- Use images as links
- Add video and audio files to webpages
Activity Outcomes:
After this lab the students should be able to understand HTML and its basic tags
- Students should be able to design basic web page using HTML Tags
- Student should be able to add text formatting tags
- Student should be able to add lists to web pages
- Student should be able to add images and videos to the web pages
Introduction HTML
HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
HTML Basic Structure
<html>
<head>
<title> Page Title Goes Here </title>
</head>
<body>
content goes here
</body>
</html>
Adding audio,image and video files:
<html>
<head>
<title>adding video</title>
</head>
<body>
<img src=”abc.jpg”>
<video src=”abc.mp4”>
</body>
</html>
How To Create basic web page
- Open Notepad
- Click on File -> Save as…
- In the File name pull-down box, type in html
- Click on Save
- Type in content for your file
- Once you finished the content, click on File -> Save
Lab Activities:
Activity 1:
- Create basic page of COMSATS University as given below
- Add text about COMSATS and apply text formatting
Solution:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor=”#98E0F0″>
<h1><font color=”#1322D6″> COMSATS Institute of Information Technology </font>
</h1>
<hr width=”100%” color=”#030303″ size=”4″ />
<Center><p><h2><b><pre> Home Department Admissions Academics Exams</pre></b></h2> </p> </center>
<hr width=”100%” color=”#030303″ size=”4″ />
<br />
<p> <h2><font color=”#1322D6″> Historic Perspective:</font> </h2> </p>
<a href=”lol.html”> click here </a><!– Write your comments here –>
<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
Activity 2:
Add list of topics, images and videos to your website
Solution:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor=”#98E0F0″>
<h1><font color=”#1322D6″> COMSATS Institute of Information Technology </font>
</h1>
<hr width=”100%” color=”#030303″ size=”4″ />
<Center><p><h2><b><pre> Home Department Admissions Academics Exams</pre></b></h2> </p> </center>
<hr width=”100%” color=”#030303″ size=”4″ />
<ol type=”I” start=”4″>
<li> computer </li>
<li> mouse </li>
<li> keyboard </li>
</ol>
<br />
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<img src=”akweb.jpg” alt=”Mountain View farrrr” style=”width:304px;height:228px;”>
<iframe width=”420″ height=”315″ src=”https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1“>
</iframe>
</body> </html>
Home Activities:
Activity 2:
Learn and try different tags and formatting options on your webpage of Comsats.
Assignment:
Create a webpage for Comsats library. Add lists and apply text formatting to your page. Make videos and take images of the library and then add them to your page.
