Web Technology I

(c) <img src=...>

The <img> tag is an empty (self-closing) element whose src attribute holds the path or URL of the image file, e.g. <img src="pic.jpg" alt="photo">. source and href are not valid attributes of <img>, and src is written as an attribute, not after an equals sign in the tag name.

(a)  

  is the HTML entity for a non-breaking space. HTML ignores extra ordinary spaces, so   is used to add one.

CSS: CSS (Cascading Style Sheets) is a language used to describe the presentation of HTML elements, such as colours, fonts and layout.

Internal CSS: In internal CSS, the style rules are written inside a <style> tag in the <head> section of the same HTML document. The rules apply to the whole page, so it is useful when one page has its own style.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS</title>
  <style>
    h1 { color: green; text-align: center; }
    p  { color: navy; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Welcome</h1>
  <p>This paragraph is styled using internal CSS.</p>
</body>
</html>

Here every <h1> becomes green and centred and every <p> becomes navy with 18px text.

Five HTML5 tags with their attributes are given below.

1. <audio> plays sound. Attributes: src (file address), controls (shows play/pause buttons), autoplay (starts automatically), loop (repeats).
2. <video> plays video. Attributes: src, controls, width, height, poster (image shown before playing).
3. <canvas> provides an area to draw graphics using JavaScript. Attributes: id, width, height.
4. <input> (with new HTML5 types) takes user input. Attributes: type (such as email, date, number), placeholder, required, name.
5. <section> (semantic tag) groups related content of a page. Attribute: id or class, used to identify or style the section.

Example:

<video src="movie.mp4" width="320" height="240" controls></video>

Types of CSS

CSS (Cascading Style Sheets) can be applied to an HTML document in three ways. Each type is defined below.

1. Inline CSS Styles are written directly inside an HTML tag using the style attribute. It affects only that single element.

<p style="color: blue; font-size: 20px;">Hello</p>

• Advantage: Quick to apply and overrides other styles.
• Disadvantage: Mixes content with presentation; cannot be reused.

2. Internal (Embedded) CSS Styles are written inside a <style> tag placed within the <head> section of the HTML document. It applies to the whole page.

<head>
  <style>
    p { color: blue; font-size: 20px; }
  </style>
</head>

• Advantage: Controls the styling of an entire single page from one place.
• Disadvantage: Cannot be reused across multiple pages.

3. External CSS Styles are written in a separate file with a .css extension and linked to the HTML document using the <link> tag in the <head> section. One CSS file can style many pages.

<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
p { color: blue; font-size: 20px; }

• Advantage: Separates content from presentation and can be reused across many pages, making site-wide changes easy.
• Disadvantage: An extra file must be loaded, which may slightly slow the first page load.

Summary: Inline CSS styles one element, internal CSS styles one page, and external CSS styles many pages from a single file.

<ol> tag: It creates an ordered (numbered) list. Each item is written inside <li>.

Properties and values:

• type: sets the numbering style. Values: 1 (numbers), A (capital letters), a (small letters), I (capital Roman), i (small Roman).
• start: sets the first number, such as start="5".
• reversed: numbers the list in descending order.

<ol type="A" start="1">
  <li>Input</li>
  <li>Process</li>
  <li>Output</li>
</ol>

<img> tag: It inserts an image in a web page. It is an empty tag with no closing tag.

Properties and values:

• src: address of the image file, such as src="photo.jpg".
• alt: alternative text shown if the image cannot load, such as alt="My photo".
• width and height: size of the image in pixels, such as width="200".
• border: thickness of the border, such as border="2".

<img src="photo.jpg" alt="My photo" width="200" height="150">

(d) <a href="www.trinitycollege.edu.np">Trinity College </a>

The anchor tag <a> creates a hyperlink and its href attribute holds the destination address. url and link are not valid attributes.

(d) a and c

HTML5 provides the <canvas> tag, which draws graphics using JavaScript, and the <svg> tag for scalable vector graphics. "canvas 2.0" is not an HTML5 tag.

(a) <table> tag

The <table> tag creates a table, with <tr> for rows and <td> for cells.

(c) Hyper Text Markup Language

HTML is the standard markup language used to create and structure web pages.

(b) <h1>

HTML has six heading tags from <h1> to <h6>. <h1> gives the largest heading and <h6> the smallest.

Types of tags: HTML tags are of two types.

• Paired (container) tags have an opening and a closing tag, such as <p>...</p>, <b>...</b> and <h1>...</h1>.
• Unpaired (empty) tags have no closing tag, such as <br>, <hr> and <img>.

CSS: CSS (Cascading Style Sheets) is a style sheet language used to control the look of a web page, such as colour, font, size and layout. It separates the design from the HTML content.

HTML with CSS for two paragraphs in different styles:

<!DOCTYPE html>
<html>
<head>
  <title>Two Paragraphs</title>
  <style>
    #first  { color: blue; font-size: 20px; font-family: Arial; }
    #second { color: red; font-size: 16px; font-style: italic; text-align: center; }
  </style>
</head>
<body>
  <p id="first">This is the first paragraph in blue.</p>
  <p id="second">This is the second paragraph in red italic.</p>
</body>
</html>

The two paragraphs are selected by their id and each gets its own style.

CSS concept: CSS (Cascading Style Sheets) is a style sheet language that defines how HTML elements are displayed, including colour, font, spacing and layout. It keeps the design separate from the content, so one style sheet can change the look of many pages.

Using CSS in a web page: CSS can be applied in three ways.

1. Inline CSS: using the style attribute in an element.
2. Internal CSS: writing rules inside a <style> tag in the <head>.
3. External CSS: writing rules in a separate .css file and linking it with <link rel="stylesheet" href="style.css"> in the <head>.

Example (internal CSS):

<html>
<head>
  <style>
    body { background-color: lightyellow; }
    h1   { color: red; }
  </style>
</head>
<body>
  <h1>My Page</h1>
</body>
</html>

This gives the page a light yellow background and a red heading.

Three tags in HTML5: <audio>, <video> and <canvas>. Others include <header>, <footer>, <section> and <article>.

Explanation of <video>: The <video> tag embeds a video in a web page without any plug-in. Its main attributes are src (the video file), controls (shows play, pause and volume buttons), width and height (size of the player), and autoplay. Text written between the tags is shown by browsers that do not support it.

Example:

<video src="lesson.mp4" width="400" height="300" controls>
  Your browser does not support the video tag.
</video>

This displays a 400 by 300 player with playback controls.

HTML: HTML (Hyper Text Markup Language) is the standard markup language used to create web pages. It uses tags to describe the structure of a page, such as headings, paragraphs, links, images and tables, and a web browser reads these tags to display the page.

Inline CSS: Inline CSS applies a style to a single element using its style attribute.

Two examples:

<html>
<head>
  <title>Inline CSS</title>
</head>
<body>
  <h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
  <p style="color: red; font-size: 20px; font-family: Arial;">This paragraph uses inline CSS.</p>
</body>
</html>

In the first example the heading becomes blue and centred. In the second the paragraph becomes red, 20px and Arial.

(c) HTML, Head, Title, Body

A web page starts with <html>. Inside it, <head> comes first and contains <title>, followed by <body> that holds the visible content.

Hyperlink: A hyperlink is a clickable text or image that takes the user to another web page, another part of the same page, or another resource. It is created with the anchor tag <a> and its href attribute.

Types of hyperlink:

1. Internal (local) link: It links to another page or file of the same website, using a relative address.

<a href="about.html">About Us</a>

2. External link: It links to a page of a different website, using the full URL.

<a href="https://www.example.com">Visit Example</a>

3. Anchor (bookmark) link: It jumps to a specific section within the same page. The target is given an id and the link uses #.

<a href="#contact">Go to Contact</a>
...
<h2 id="contact">Contact</h2>

4. Email link: It opens the default mail program.

<a href="mailto:info@example.com">Send Email</a>