CS 511-Web Engineering

Week 2

Topic 16-18

CS 511-Week 2: Topic 16-18
CS 511-Week 2: Topic 16-18


Topic 16:

Common HTML tags:

 DOCTYPE:

This tag is used to specify that the document is an HTML document.

Syntax:

<!DOCTYPE html>


Head and Body tags:

In the head tag External files, document title, and metadata are mentioned.

In the body tag contents of the documents are mentioned.


Heading Tag:

There are six types of Headings available in the Heading tag

<h1>.......</h1>

<h2>.......</h2>

<h3>.......</h3>

<h4>.......</h4>

<h5>.......</h5>

<h6>.......</h6>


Paragraphs and Divisions:

The tag that is used for a paragraph is <p>. It is the container for text.

The tag that is used for division is <div>. It is used for division. It is also a container tag.


Inline Text element:

  • <a>
  • <abbr>
  • <br>
  • <cite>
  • <code>
  • <em>
  • <mark>
  • <small>
  • <span>
  • <strong>
  • <time>
  • ........

Block elements:

  • <div>
  • <h1><h6>
  • <hr>
  • <li>
  • <ol>
  • <ul>
  • <p>
  • <table>
  • ......

Images:

The element that is used for displaying images is <img>.

It is compulsory to use the ‘alt’ attribute in the image tag to display text against an image.


Character entities:


Entity

Description

&nbsp;

Nonbreakable space

&lt;

< 

&gt;

> 

&copy;

©

&trade;

™

Topic 17:

Links:

Links are also called anchors. It is an important part of all web pages.

It has two parts

  1. Label 
  2. Destination


Relative Referencing:


Relative Link Type

Example

Same directory

<a href="example.html">

Child Directory

<a href="images/logo.gif">

Grandchild/Descendant Directory

<a href="css/images/background.gif">

Parent/Ancestor Directory

<a href="../about.html">
<a href="../../about.html”>

Sibling Directory

<a href="../images/about.html">

Root Reference

<a href="/images/background.gif">


Topic 18:

We discuss three types of list
  1. Unordered list
  2. Ordered list
  3. Description list
Unordered lists:
In the Unordered list, items are not in a particular order. These are bulleted lists.Unordered lists markup navigational menus.

For example:

<!DOCTYPE html> 
<ul>
 <li>About Us</li> 
<li>Home</li> 
<li>Products</li> 
<li>Contact Us</li> 
</ul>

Output:

  • About Us
  • Home 
  • Products
  • Contact Us 
Ordered lists:
In the Ordered list, items are in a particular order. These are numbered lists.

For example:

<!DOCTYPE html> 

<ol> 

<li>Introduction</li> 

<li>Background</li> 

<li>My Solution</li> 

<li>Conclusion</li> 

</ol>


Output:

  1. Introduction
  2. Background
  3. My Solution
  4. Conclusion

Description lists:
The collection of names and descriptions is called a description list. These lists are used infrequently.


For example:


<dl>

<dt>HTML</dt>

<dd>Hyper Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheet</dd>

</dl>


Output:


HTML

Hyper Text Markup Language
CSS
Cascading Style Sheet

Assessment: 

  • Which of the following application displays the user's requested webpage?
    1. Domain Name System
    2. Routing Protocol
    3. Routing Algorithm
    4. Web browser
  • When a webpage is requested,
    1. Firstly, HTTP contents are fetched
    2. Firstly, an empty page is fetched
    3. Firstly, HTML contents are fetched
    4. Firstly, IPX contents are fetched

The End 😊