Page 1 of 10 HTML&CSS

Contents
How to test a website ................................................................................................................................... 2
Storyboard: ................................................................................................................................................... 3
Sitemap (website contains many webpages) ............................................................................................... 3
What is a homepage? ................................................................................................................................... 5
Types of hyperlinks ....................................................................................................................................... 5
There are requirements to publish a website............................................................................................... 5
Why it’s called top?....................................................................................................................................... 6
How to insert a comment in HTML? <!-- --> ................................................................................................ 7
Block tag!! ..................................................................................................................................................... 7
Inline tag!! ..................................................................................................................................................... 7
How to convert block tag to inline? .............................................................................................................. 8
How to insert a button in HTML?.................................................................................................................. 8
How many ways to specify a color? .............................................................................................................. 9
Canvas: ........................................................................................................................................................ 10

ICT ahmed.magdi.cs@gmail.com
Page 2 of 10 HTML&CSS

Part 1:
Sheet contains practical part (html & CSS)
Part 2:
To link css file with html file
1. Open html file

2. attach stylesheet
3. Browse and select the CSS file
Result:

How to test a website

1. Test if all hyperlinks are working, no broken links
2. Test if buttons are working correctly
3. Test if css/ stylesheet is working
4. Test if the chosen font is displayed. Make sure when
specifying font, you should choose many fonts

5. Test if images are displayed correctly

6. Open my website using different browsers (chrome, fire fox,
safari)

ICT ahmed.magdi.cs@gmail.com
Page 3 of 10 HTML&CSS

Storyboard:
A diagram, that allows designer/ developer to decide
1. Type of font
2. Colors
3. Area where you will include images
4. Area where you will add hyperlinks
5. Different section of webpage (where ?)

Sitemap (website contains many webpages)

A site map (or sitemap) is a list of pages of a web site within a domain.

A sitemap is a file where you provide information about the pages, videos, and other files on
your site, and the relationships between them

ICT ahmed.magdi.cs@gmail.com
Page 4 of 10 HTML&CSS

Sitemap answers the following questions:

1. How many webpages are there in your site?
2. How can a user navigate your site?
3. What are the links you can use?
4. How many links you have to insert?

Example: website that contains 5 main webpages, so the

homepage should contain links to all other webpages
Webpages are
1. Home page: 4 links
2. Contact page: 2 links
3. Product page: 3 links
4. Service page: 5 links
5. About: 2 links

Helps you to navigate the website

ICT ahmed.magdi.cs@gmail.com
Page 5 of 10 HTML&CSS

What is a homepage?
- The 1st webpage in your site that should be
o Attractive
o Easy to use
o Contains links to all other webpages
o Easy to navigate
Types of hyperlinks

The use of link to refer to a page within The use of link to refer to another page
my website within another website … different
… within same domain domain
More secure, If the external website’s address
changed, that results in broken link and
that is a bad web design
Website? A collection of many webpages linked together within
same domain. Example: www.ahmad.com
Example: ahmad.com/page2.html/service.html

If you created a website, you need to publish it.

There are requirements to publish a website
1. Choose a domain name/address for it
example: ahmad.com
http://www.ahmad.com → URL, what are the parts of URL
(protocol, world wide web, domain name, domain type)
Top level domain - TLD: .com or .gov

ICT ahmed.magdi.cs@gmail.com
Page 6 of 10 HTML&CSS

Why it’s called top?

- Because browser check the address from right direction
- Example: https://www.google.com/

2. Server: super computer that will serve other clients, the

computer which will store/contains all website files such as
.html files, images, css files, videos files
Parts of URL: Universal resource locator
http://www.ahmad.com.eg
→ URL, what are the parts of URL
(protocol, world wide web, domain name, domain type)
1. Protocol: set of rules that allows communication between
different systems
2. www: world wide web. A huge collection of webpages and
other resources
3. domain name: unique and easy to remember
4. domain type: specifies type of site. Top level domain
com→ commercial
gov → governmental
edu→ educational
5. .eg→ specify language of site (country domain)
.fr → French language is chosen to display the page
.ca → Canada

ICT ahmed.magdi.cs@gmail.com
Page 7 of 10 HTML&CSS

How to insert a comment in HTML? <!-- -->

<!--note for self--><!—notes notes notes-->

Block tag!! A tag that shows its content in a separate line

Example: image below shows heading size one alone in one line

Output:

Inline tag!! A tag that shows its content in the same line with the tag
below it
Example: below is an image that is displayed with a link in the same
line

To convert img tag from inline to block, follow the steps

ICT ahmed.magdi.cs@gmail.com
Page 8 of 10 HTML&CSS

- In CSS file write:

How to convert block tag to inline?

Displayed alone in one line Displayed with other tags in the

Next tag displayed below it same line
Example: <h1> </h1> Example: <img />
<p> </p> <a href=”” > click here </a>
<OL> </OL>
<UL> </UL>
How to insert a button in HTML?

Has a value attribute Should write button name

between open and close tags
Self-closed Open and close tags
<input /> <button> </button>
<img /> <h1> </h1>
<br />
<link />

ICT ahmed.magdi.cs@gmail.com
Page 9 of 10 HTML&CSS

How many ways to specify a color?

1. name
2. HEXA; characters
0123456789 abcdef
#RRGGBB;

ICT ahmed.magdi.cs@gmail.com
Page 10 of 10 HTML&CSS

Canvas:
area where you add content

ICT ahmed.magdi.cs@gmail.com