Scribd
Upload
24 views13 pages

Internet Application Prog Lesson 2

Uploaded by

ewambo350
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
24 views13 pages

Internet Application Prog Lesson 2

Uploaded by

ewambo350
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/ 13

SPC 2205 INTERNET APPLICATION PROGRAMMING

Learning Group:
BSc Computer science
Lecturer: Theuri Patrick
Lesson 2
learning topics

• 2.0 HTML formatting


• 2.1 HTML Styles
• 2.2 HTML links
• 2.3 HTML images
• 2.4 HTML list
Web editor for demonstration purposes use sublime text
But not limited

2.0 HTML Formatting Elements

HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting tags in
HTML. These tags are used to make text bold, italicized, or underlined. There are almost
14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.

Element name Description

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

1|Page
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTM

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

Example illustrating Html text formatting elements.

Difference between <strong> and <b> tag


Both <strong> and <b> tags render the enclosed text in a bold typeface by default, but
the <strong> tag indicates that its contents have strong importance, whereas
the <b> tag is simply used to draw the reader's attention without conveying any special
importance.

2|Page
Difference between <em> and <i> tag
Similarly, both <em> and <i> tags render the enclosed text in italic type by default, but
the <em> tag indicates that its contents have stressed emphasis compared to
surrounding text, whereas the <i> tag is used for marking up text that is set off from the
normal text for readability reasons, such as a technical term, an idiomatic phrase from
another language, a thought, etc.

2.1 HTML Styles


Styles in HTML are basically rules that describe how a document will be presented in a
browser. Style information can be either attached as a separate document or embedded
in the HTML document.

There are 3 ways of implementing style in HTML :


1. Inline Style: In this method, the style attribute is used inside the HTML start tag.
2. Embedded Style: In this method, the style element is used inside the <head>
element of the document.
3. External Style Sheet: In this method the <link> element is used to point to an
external CSS file.

1. Inline Style
Inline Style: In Inline styling, the CSS rules are directly written inside the starting
tag using the style attribute. The style attribute includes a series of CSS property and
value pairs. Each ‘property: value ‘pair is separated by a semicolon (;).

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

3|Page
Inline style sheet css save as inlinestyle.html

NB: it will change only the first h1 selector, changing the specific style
where its applied. That’s why in our output result first h1 colors blue and
the other h1 remains by default black.

2. Embedded Style /internal style save as internalstyle.html

Embedded style sheets are defined in the <head> section of an HTML document
using the <style> tag. You can define any number of <style> elements inside
the <head> section.

NB: it will change all h1 elements to one color

4|Page
3. External Style Sheet:
External style sheets are the most flexible because with an external style sheet, you can
change the look of an entire website by updating just one file.

You can attach external style sheets in two ways — linking and importing:

Here are the advantages of linking a CSS/external file to HTML:

➢ Time-effective — you only need to create a single CSS file to style all
HTML files.
➢ Faster load time — the site will cache the CSS file for your visitors’ next
visit.
➢ Improve SEO — storing CSS styles in another file makes the HTML file
more concise and readable by search engines.

Why not external Style-sheet?

• If the style-sheet file has large data, then downloading the file takes time
and it increases page download speed.
• For static site with limited pages and different design on each page,
external style-sheets are harder to maintain.

NB: Example- one of the method using linking


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

Link attribute is embedded inside the head section

➢ Link rel — element defines the relationship between the file that hosts
this command and the file defined in the href attribute. The standard
value for this attribute is stylesheet.
➢ type — defines the content of the linked file. In this tutorial, set this
attribute’s value to text/css. However, you can skip it altogether if you’re
using HTML5
➢ href — specifies the location of the CSS file you want to link to the HTML.
If the CSS file is in the same directory as the HTML file, you only need to
enter the file name. Otherwise, you need to include the folder name in
which you store the CSS file (example: CSS/stylesheet.css).

5|Page
Step 1. Open sublime text > select file >open folder>select new folder>rename to
your own name of choice.

Step 2. Inside named folder save document as externalstyle.html

Step 3. Open new tab ctr+n. write css rules and save as mystyle.css in the same
folder

Step 4. Run the code using html file and right click >select open in browser

6|Page
2.2 HTML LINKS
In HTML, links are defined with the <a> tag:
The HTML anchor tag <a> defines a hyperlink that links one page
to another page. It can create hyperlink to other web page as
well as files, location, or any URL.
Href (pronounced "h" — like the letter — "ref) is short for
Hypertext Reference. This is a goofy name that really only
means a URL (otherwise known as a web site address)
<a href = "..........."> Link Text </a>
<a href="url">link text</a>

Example
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

7|Page
Local Links

The example above used an absolute URL (A full web address).

A local link (link to the same web site) is specified with a relative URL (without
http://www... )

HTML Links – Colors


When you move the mouse over a link, two things will normally happen:

• The mouse arrow will turn into a little hand


• The color of the link element will change

By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red

HTML Links - The Target Attribute


The target attribute specifies where to open the linked
document.
Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools! </a>
Types of Html links target attributes {blank, self, parent, top, frame name}

Target Value Description

_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

8|Page
framename Opens the linked document in a named frame

Example of target attribute

2.3 HTML IMAGES


images enhance visual appearance of the web pages by making them more interesting
and colorful.

The <img> tag is used to insert images in the HTML documents. It is an empty
element and contains attributes only. The syntax of the <img> tag can be
given with:
<img src="url" alt="some_text">

Let's see an example of HTML image.

Attributes of HTML image tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below

9|Page
1) src

It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value
of the alt attribute describes the image in words. The alt attribute is considered good for
SEO (search engine optimization) prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.

4) height

It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.

Use of height and width attribute with img tag


if we want to give some height and width to display image according to our requirement, then we can
set it with height and width attributes of image.

NB: How to get image from another directory/folder?

<img src="E:/images/animal.png" height="180" width="300" alt="animal image">

E: - represents location from desktop drive use your preferred


choice according to how you have saved your drive names. You can
omit width and height its optional

10 | P a g
e
Note: If src URL will be incorrect or misspell then it will not
display your image on web page, so try to put correct URL

2.4 HTML – Lists


HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain −
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list your
items.
• <dl> − A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence.
This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet

Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define


the style of the marker:

Style Description

list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

11 | P a g
e
list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

12 | P a g
e
Uppercase Letters:

HTML Description Lists

HTML also supports description lists. A description list is a list of terms, with a
description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:

13 | P a g
e

You might also like