Scribd
Upload
29 views19 pages

ICT Lab 6

Uploaded by

shr78138
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
29 views19 pages

ICT Lab 6

Uploaded by

shr78138
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/ 19

Lab Manual 6

Website Development

SCHOOL OF INTERDISCIPLINARY ENGINEERING AND SCIENCES NATIONAL UNIVERSITY


OF SCIENCES AND TECHNOLOGY (NUST
Introduction and hands-on session with basic
website development languages

Objectives:

This lab's objectives are to familiarize students with web development languages and the
concept and usage of a JavaScript-based framework.

Basic website Structure:

A complete responsive website consists of three parts: HTML, CSS, and JavaScript. The
following example explains the importance of each language.

HTML provides the basic structure of a website. The bones.

CSS controls the design and layout of the webpage. The skin.

JavaScript makes your webpage functional. The Muscle.


What is HTML?

HTML stands for Hypertext Markup Language. It is the language used to display
content on web pages in your browser. HTML provides the structure of a webpage,
but it is not a programming language. Instead, it is called a markup language because
it uses tags to organize and format content. Unlike programming languages (like
PHP or Java) that use logic to control content, HTML simply tells the browser how
to display text, images, and other elements.
Loading an HTML File in Your Browser
You can create an HTML file on your computer and load it in your browser
without needing the internet. This means only you can see the page on your local
computer. For real websites, HTML files are stored on special computers called
servers, so anyone on the internet can access them. But the process of creating an
HTML file is the same.
Steps to Create an HTML File:
1. Create the file:
o Right-click on your desktop or in a folder, select “New,” and then
“Text Document.”
o Name the file index.html (make sure it does not end in “.txt”).
o If you don’t see the file extensions, go to the View tab in your folder,
and check the “File name extensions” box.
2. Open the file in your browser:
o If the file shows a Chrome or browser icon, just double-click it to
open.
o If not, right-click the file, select “Open with,” and choose your
favorite browser.
3. Check your browser:
o The page will look blank for now because the file doesn’t have any
code in it yet.
Editing the HTML File
Now that the file is ready, you can start coding. To edit your HTML file, you need
to open it in an editor. Right-click the file and either choose “Open with” followed
by an editor, or if you have an editor installed, you might see a quick link from the
right-click menu.
Here are some popular editors you can use:
• Visual Studio Code
• Notepad++
• Sublime Text
• Atom
• Brackets
Once you open the file in your editor, you can start writing HTML code!
HTML Tags
HTML is made up of tags, which are special bits of text used to mark up and
organize parts of your webpage. This is why it’s called Hypertext Markup
Language. Tags tell the browser how to display the content inside them.
Example of a Tag:
If you want to make text bold, you can use the <b> tag, like this:
This is my very first website and I’m <b>extremely excited!!!!!</b>
In this example, the words “extremely excited” are inside the <b> tags, which
means they will be shown in bold when viewed in a browser.
Anatomy of an HTML Tag
Let’s break down a tag:
• An opening tag looks like this: <b>. It starts the effect (in this case, bold
text).
• A closing tag looks like this: </b>. The forward slash (/) before the letter "b"
indicates that the bold effect should stop.
The browser sees these tags and applies the effect (bold in this case) to the text
between them. The tags themselves are invisible to the user, meaning they won’t
show up on the web page.
Basic Structure of an HTML Document
The code works because it’s saved as an HTML file, a format that web browsers
can read and display. However, to make the document valid and ready for the
internet, we need to use some essential tags.
Doctype and HTML Tags
1. <!DOCTYPE html>: This is the first line in any HTML5 document. It tells
the browser that the file is written in HTML5, which is the most current
version of HTML. It’s not actually an HTML tag, so it doesn’t need a
closing tag.
2. <html>: This tag wraps around all the HTML content on your page and tells
the browser that everything inside is part of the HTML document. It has both
an opening (<html>) and a closing tag (</html>).
Here’s a simple starting point for an HTML document:
<!DOCTYPE html>
<html>
</html>
Head and Body Sections
In an HTML document, the content is divided into two main sections: the Head and
the Body. These sections are placed inside the main <html> tag.
Here’s how it looks in the code:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
The Head Element:
The <head> element contains information about the webpage. This includes things
like:
• Title: The text that appears on the browser tab.
• Meta Descriptions: Information about the page (for search engines).
• Links to CSS and JavaScript files: These files are used to style the page
and add functionality.
While we won’t be diving into CSS and JavaScript in this lesson, it’s important to
know they are connected to the head section.
The Body Element:
The <body> element contains the main content of the webpage — everything that
the user sees in the browser. This is where you write the text, images, buttons, and
other elements that will be displayed.
For example, if you write the following inside the <body> tag:
<body>
This is my very first website and I’m <b>extremely excited!!!!!</b>
</body>
The text "This is my very first website and I’m extremely excited!!!!!" will
appear in the browser, with “extremely excited” shown in bold.
Basic Head Tags
The <head> section of an HTML document contains important information about
the webpage that is not directly visible to users but helps the browser display the
page correctly.
Meta Tags:
1. Character Encoding: The first tag that should be in your head is the meta
charset tag, which looks like this:
<meta charset="utf-8">
UTF-8 is the most widely used character encoding for representing text on
the web. It ensures that all characters, symbols, and letters can be correctly
displayed on the webpage. Character encodings are important because
computers use binary (0s and 1s) to store and process data, and they need a
way to map this binary data to readable characters.
2. Viewport Tag: Another important tag for all websites is the viewport meta
tag:
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
This tag ensures that your website is responsive, meaning it will display
correctly on devices of different sizes, such as computers, tablets, and mobile
phones. The content in this tag tells the browser to adjust the width of the page
to match the width of the device. For example, a mobile phone screen is
smaller than a computer screen, so this tag ensures that the website resizes
itself properly for smaller screens.
• width=device-width: Sets the width of the webpage to match the screen
of the device.
• initial-scale=1: Sets the initial zoom level to 100% (no zoom).
• shrink-to-fit=no: Helps with scaling and layout on smaller screens.

Title Tag:

Another key tag in the head section is the title tag:

<title>My First Website</title>


The text inside the <title> tag will appear in the browser tab. If a website has multiple
pages, each page can have its unique title. The title tag helps users and search engines
identify what the page is about.
Example of a Complete Head Section:
Once you’ve added these essential tags, your head section will look like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Website</title>
</head>
In your browser, the text you put in the <title> tag will appear on the tab at the top
of the screen.

Basic Body Tags


Many of the basic tags you use in the body of an HTML document are similar to
tools you might use in word processing programs like Microsoft Word. These tags
let you create headings, bold text, lists, and tables.
Before CSS became common, these HTML tags were used to organize and style
content, making it easier for readers to understand. While some of these tags are not
used as much anymore (since CSS can handle styling), it’s still useful to know about
them.
Header Tags
HTML header tags, also called heading tags, help structure the content on a
webpage and show the importance of different sections of text. There are six heading
tags, from <h1> to <h6>, where <h1> is the most important and <h6> is the least
important.
• <h1> is usually used for the main title of the page.
• <h2> is often for subtitles or section headings.
• <h3>, <h4>, <h5>, and <h6> are used for subheadings and smaller sections
of content.
Using header tags correctly is important for readability and accessibility, as they
make the content easier to navigate. These tags also help with search engine
optimization (SEO) because search engines use them to understand the structure
and content of the page.
Here’s an example of how you can use the heading tags:
<body>
<h1>My First Website</h1>
<h2>An HTML Playground</h2>
<h3>An HTML Playground</h3>
<h4>An HTML Playground</h4>
<h5>An HTML Playground</h5>
<h6>An HTML Playground</h6>
</body>
When you save and reload the webpage in your browser, the headings will display
in different sizes based on their importance, with <h1> being the largest and <h6>
the smallest.
Save and reload the web page, it will look like this:

Header Tags
You can see how the font sizes get progressively smaller from <h1> to <h6>. Most
websites don’t use all of these tags. Typically:
• <h1> is used for the main title.
• <h2> is used for subtitles.
• <h3> is sometimes used for section titles.
Tags like <h4>, <h5>, and <h6> are less commonly used in everyday web design.
Paragraph Tags
The HTML paragraph tag (<p>) is used to create paragraphs of text. Paragraphs
are block-level elements, meaning they always start on a new line and take up the
full width of their container.
To make a paragraph in HTML, you just wrap your text with the <p> opening and
closing tags. For example:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam facilisis arcu vel mollis finibus. Nunc facilisis
vel nisl lacinia cursus. Cras suscipit augue sed volutpat
tincidunt.
</p>

<p>
Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque
nunc, eget elementum metus. Nulla sollicitudin bibendum nibh,
sit amet semper tortor. Nunc rhoncus non arcu in scelerisque.
</p>
In the Browser:
When you save and view the page in your browser, each paragraph will appear as a
block of text with a space between them, like this:

Tips for Using the <p> Tag


• Use the <p> tag to define paragraphs of text.
• Paragraphs are block-level elements, meaning they always start on a new
line and take up the full width of the page.
• To create a paragraph, wrap the text between an opening <p> tag and a
closing </p> tag.
• You can group other HTML elements (like images, links, and lists) within
a paragraph tag to keep them organized.
• Using the <p> tag improves readability by breaking up your text into logical
sections, making it easier for users to read and for screen readers to interpret,
enhancing accessibility.
Line Break
To separate content onto multiple lines without creating extra space (like a paragraph
would), you can use a line break, which is represented by the <br> tag.
How to Add a Line Break:
Simply place the <br> tag wherever you want the text to break. You can also add
multiple line breaks to create more space between lines of content. Here’s an
example:
Fusce sit amet rutrum lacus.<br><br><br/>
Sed efficitur laoreet nisl, ac faucibus velit hendrerit sit amet.

Style Tags
Style tags add formatting to your text, but as mentioned earlier, CSS is now
preferred for styling. However, it's still useful to know the basic style tags in HTML:
• The <b> tag makes text bold.
• The <i> tag makes text italic.
• The <u> tag makes text underlined.
• The <em> (emphasized) tag is typically displayed as italic text.
• The <strong> tag is typically displayed as bold text.
Here’s an example of how these tags work:
<b>Sed efficitur laoreet nisl,</b><br>
<i>ac faucibus velit hendrerit sit amet.</i><br>
<u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br>
<em>Nam lacinia dolor at mi tristique rhoncus.</em><br>
<strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>
Here is what that code would look like in the browser:

Horizontal Rule
The <hr> tag creates a horizontal line on your web page that spans the width of the
container. It’s a void element, meaning it doesn't require a closing tag.
<strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>
<hr>
Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies.

In this example, the horizontal line will separate the text before and after it.

Anchor Link
Links are essential for navigating the internet. In HTML, the link tag is represented
by the <a> tag, which stands for anchor, as it anchors the current webpage to another
destination.
To create a clickable link, wrap the link text in an <a> tag. The <a> tag requires at
least one attribute (additional information inside the opening tag) to function
properly.
Attributes
• href (hypertext reference): This attribute specifies the URL of the
destination page.
Example:
<a href="https://www.google.com/" target="_blank">Sed in lacus a augue
rutrum</a>
In this example:
• The href attribute points to Google's website.
• The clickable text will be "Sed in lacus a augue rutrum."
• The target="_blank" attribute ensures that the link opens in a new tab or
window.
URL (Universal Resource Locator)
A URL acts as the "address" of a web page or file on the internet. It tells the browser
where to navigate when the link is clicked.
Target Attribute
The target attribute specifies where to open the linked document. If set to _blank,
it opens in a new window or tab; if omitted, the link opens in the same window.
Example with the default behavior (same window):
<a href="https://www.example.com">Go to Example</a>
Images in HTML
To embed images on a web page, the <img> tag is used. Since it's a void element
(it doesn't require a closing tag), you only need an opening tag with attributes to
specify the image details.
The <img> tag requires the following key attributes:
• src (source): Specifies the URL or file path of the image.
• alt (alternative text): Provides a text description of the image for
accessibility and if the image fails to load (recommended always to include
this).
Example 1: Linking to an Image URL
Here’s how you can link to an image from the web (using Placeholder.com in this
case):
<img src="https://via.placeholder.com/600x300.jpg" alt="Placeholder image">
In this case, the image will be fetched from the given URL and displayed on your
webpage.
Example 2: Using a Local Image
If you have a local image in the same folder as your HTML file, you can reference
it like this:
<img src="600x300.jpg" alt="Local image">
Ensure the image file (e.g., 600x300.jpg) is saved in the same directory as the HTML
file, otherwise, provide the correct file path.
Adding a Border to an Image
The <img> tag can also use attributes like border, which specifies the width of the
border in pixels:
<img src="https://via.placeholder.com/600x300.jpg" border="10" alt="Image with
a border">
In this example, the image will have a 10-pixel border around it.
Lists in HTML:
In HTML, you can easily create two types of lists: bulleted lists (unordered) and
numbered lists (ordered).
Bulleted Lists are created with the <ul> tag, which stands for "unordered list." Each
item in the list is written inside the <li> tag, which stands for "list item." Here's an
example of a bulleted list with different fruits:
<ul>
<li>apples</li>
<li>oranges</li>
<li>pineapples</li>
<li>mangoes</li>
<li>dragonfruit</li>
</ul>
This creates a bulleted list where each fruit is on its own line with a bullet point in
front of it.

The same process applies to numbered lists (ordered lists), except you use the <ol>
tag for "ordered list."

Nested Lists in HTML:


Nested lists allow you to organize information into a tree-like structure by placing
a list inside another list item. This is useful when you need to categorize items
further.
To create a nested list, place another list inside a list item (<li>). For example, under
the fruit "apples," you can create a sub-list of different apple types.
Here's how you can create a nested list:
<ul>
<li>apples
<ul>
<li>golden delicious</li>
<li>granny smith</li>
<li>gala</li>
</ul>
</li>
<li>oranges</li>
<li>pineapples</li>
<li>mangoes</li>
<li>dragonfruit</li>
</ul>
This will display "apples" as part of the main list, and "golden delicious," "granny
smith," and "gala" will appear indented under "apples."
When you reload the page, you will see the nested items under "apples" further
indented compared to the main list.
Tasks
Task 1: Create a Simple Webpage
Objective: Students will create a basic HTML webpage that includes a heading,
paragraph, image, and a link.
Instructions:
• Create a webpage with the title "My First Webpage."
• Add a main heading (<h1>) and a subheading (<h2>) describing the page's
content.
• Write a paragraph about yourself using the <p> tag.
• Add an image using the <img> tag from a URL or your local system.
• Create a link using the <a> tag that opens to a favorite website in a new tab.

Task 2: Build a Personal Profile


Objective: Create a personal profile webpage using various HTML elements.
Instructions:
• Use heading tags (<h1> to <h3>) to structure the profile.
• Include paragraphs (<p>) to write a brief biography.
• Add a horizontal rule (<hr>) to separate sections of your profile.
• Include at least one image using the <img> tag.
• Add a list (either ordered <ol> or unordered <ul>) of your favorite hobbies.
• Add links to your social media profiles using the <a> tag.

Task 3: Create a Favorite Recipes Page


Objective: Design a webpage that includes a recipe using lists and headings.
Instructions:
• Add an <h1> title "Favorite Recipe."
• Include an <h2> for the recipe name.
• Add a list of ingredients using the <ul> tag.
• Create an ordered list (<ol>) to outline the steps of the recipe.
• Use the <em> or <strong> tags to highlight specific cooking tips.

Task 4: Create a Nested List


Objective: Create a webpage that uses nested lists to organize content.
Instructions:
• Use a main heading (<h1>) for the title of the page.
• Create a list of fruits using the <ul> tag.
• Under one of the fruits (e.g., "Apples"), create a nested list with three
different types of apples.
• Add a paragraph (<p>) to describe one of the fruits.

Task 5: Build a Portfolio Webpage


Objective: Students will create a personal portfolio webpage.
Instructions:
• Use various heading tags to organize sections like "About Me," "Skills,"
"Projects," and "Contact."
• Include paragraphs describing yourself, your skills, and your projects.
• Add images of your past work or placeholders.
• Use anchor tags (<a>) to link to external projects or social media.
• Add an unordered list of your technical skills.

You might also like