Scribd
Upload
38 views

Day1 Lab Assignment

Uploaded by

ma3325905
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views

Day1 Lab Assignment

Uploaded by

ma3325905
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Day 1 Lab Assignments

Do the following Assignments (Try to make your pages HTML5 valid, and don’t use
deprecated tags or attributes):

1- Start to create your personal website, create new folder that will contains all site
pages and another new folder inside it for website resources (images, media,...).
2- Create welcome page and name it (welcome.html) that contains a welcome
statement and your name in new line, and welcome image on the center of the
page.
a. Change the font and color of the welcome statement.
b. Change the background color of the page.
c. Make the page after 5 seconds; redirect the user to another page named
(Home.htm).
d. Make (skip Intro) link on the center bottom of the page that skips
welcome page, and opens (Home.html) page in the same browser
window.
3- Create the Home page and name it (Home.html), and add the following on it (as
shown in the image below):
a. Add your Name in the center of the page as the page main header
b. Add your personal information in bullet list on the left.
c. Then put your personal photo (on the right),
d. Finally add a brief about yourself (Make a long text on about me, to show
vertical scroll on the page, and so you need to scroll to reach the end of
the page)
e. Change your name to be in Arabic?
i. You need to use meta tag to change the page character encoding,
what is it?
f. Add horizontal line after “about me” section, and then Create div in the
bottom of home page (after the horizontal line) include 3 links (Home,
About, Contact me) to (top part of home page (bookmark), page named
About.htm, page named Contact.htm).
g. In the footer add your social media links (each one is an image link,
when clicked opens the clicked social profile in a new window).
h. Handle the below image , to be a link to the top of page
(Bookmark).
i. The home page should look as the following after you finish it:

Your Full name


My personal info:
 Age:
 Address: Personal Photo
 Phones:
 Faculty name (as a link to your faculty website,
that opens in a new window)
 Graduation year
 Hobbies
1.
2.
 Send me Email (Mail Link)

About me:

home contact us about

Copyrights © are reserved to ITI.


4- Follow these guidelines in your home page:
a. Use <title> tag.
i. What’s the importance of using <title> tag? And how it’s related to SEO?
b. Use meta – charset tag. (Why?).
c. Use meta – viewport tag. (Why?).
d. Use meta – description tag.
i. What are its benefits? And how it’s related to SEO?
e. Set a favicon for your page.
5- Create new page and name it (About.htm), and write about yourself using text
formatting and appearance tags (Try to not use deprecated tags, and use “style”
attribute instead).

Self-Study Assignments (Bonus):

1- Replace any deprecated tags and attributes in your pages to be HTML5 Valid.
2- Put a back ground sound on (welcome page), that runs automatically when the
page loads (use audio tag).
a. Most browsers are blocking the auto play sound in pages currently; in this
case you can make the audio start by user normally.
3- Replace the image in the welcome page, to be a full-page background image (like
this one: https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm )
4- Display a video in your home page in any place (use video tag).
a. Try to make the video as Fullscreen Video Background in home page or welcome page
(like this one here: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp )
5- Set a favicon for your page.
6- Try iframe on your home page.
7- Design a single page website like the following (You can make it as a personal CV
for yourself):
8- Use Image map in new page.
9- What are Back-links? (With example)
10- What’re meta tags? And what’re its benefits and uses? (With example)
11- What are the meta tags for social media? And what are its uses? (With
example)
12- What are search engines? And how it work?
13- What’s SEO?
14- How to optimize your website for search engines?

<Thank> YOU </Thank>

You might also like