Grade 11 HTML websites

I want to congratulate those of you have finished their projects and uploaded it online.

Here are links to the first ones to do that:

Mariam Maaty, 11C: http://www.webng.com/fewquotes/

Malak Amr, 11 C: http://marinebio.webng.com/

Nayer, 11 C: http://myjoker.webng.com/

Great job you guys. Looking forward to see the rest of your class mates’ projects.

The Prezi Competition for Highschool Students

Each week we will select the best Prezi from each class and the winners will have their prezis displayed here…

May the best Prezis Win!!

The winners for this week are:

Dalia Selima from 11 A

Julia Joseph from 11 B

Gina ibrahim & Nourhan Sameh from 11C prezi

Bassel Amgad from 11 D

The competition is renewed each week. You can send me the  link to your prezis by email at maryvictor@aucegypt.edu or as a comment to this post.

Weebly Time plan

WEEBLY TIMEPLAN

Week one (SITE MAP)

Session One 

Choose a topic and partner

Choose website name (and post them on the blog)

Session Two (Editors and Design)

Signup and invite partner from editors section ( add administrator)

choose theme from design
Edit all design elements (site title, paragraph title, paragraph text, links)
Edit design css and html

Session Three (PAGES)

Create pages and overall structure for the website that reflects the topic

browse online content and prepare material for next week (pictures, text and videos)

….

Week Two (SITE DETAIL)

Session One  (Elements-Basic)

Write and edit text in all pages (paragraphs)

Session Two (Elements- Multimedia)

Add pictures and slideshows and galleries in all pages

Session Three (Elements- Multimedia)

Add youtube videos

Week Three (PUBLISH)

Session One (ELEMENTS-MORE/REVENUE)

More

Links and Widgets

Session Two (SITE SETTINGS)

Search engine optimization

Change site address

Session Three

Publish site

Polishing and Publishing your HTML website ( duration 2 weeks)

Stage 1 : Discover the power of cascading Style Sheets (css)

Cascading style sheets are used to add themes to the website
To understand how, visit http://csszengarden.com/ and try different themes by clicking on different links. They are the same HTML files but different css files.

How to add a cascading style sheet to your website

  1. Open google.com
  2. Browse css templates and download one that you like.
  3. Make sure that it is copied in the same folder as your project (the css file is beside your html files)
  4. Add this code in the head section changing only the cssfilename
  5. <link rel="stylesheet" type="text/css" href="cssfilename.css" media="screen" />
  6. Repeat steps 4  & 5 in all your html files
  7. Then open your website!

If your are lost you can check this presentation for more info

https://maryvictor.com/wp-content/uploads/2011/05/the-power-of-web-design-using-css.ppt

Stage 2: upload your website

The easiest way to do it is to

  1. open dropbox.com
  2. Signup and verify account
  3.  click on this link to enable public folder https://www.dropbox.com/enable_public_folder
  4. open your public folder
  5. upload your website in your public folder (all images and files)
  6. (You can download the desktop version if you want)
  7. then write click on your homepage and copy the public link

THIS is the link to your website HOLD ON TO IT and save it somewhere cos we are going to use it in stage 3!!!

Stage 3: choose your own domain name

Since the dropbox public link is too long wwe are going to create a free, easy and short domain name, here is how:

  1. Open dot.tk
  2. choose your unique and free domain name
  3. then in the section forward this domain too add your public link that your domain name will point too
  4. continue registration ofcourse for 12 MONTHS!
  5. if you do not sign up you will not be able to renew it after a year, so it will last you only 1 year!

FINAL STEP!!!!!

PASTE YOUR DOMAIN NAME (for example maryvictor.tk) as a comment to this post. And this is how I know that you are done and have submitted your assignment!

Term 1 project: HTML Website

Requirements for the project:
1 person –> 5 pages
2 persons –> 10 pages

Navigation
Homeage has to link to all other pages
Or each page links to the next page and back to the homepage

An empty page will look like

<html>

<head>                 </head>

<body>

</body>

</html>

Pages have to include the following:

Images

<img src="imagename.extension" width="200">

Videos

open on youtube

open video file

click on SHARE

click on EMBED

Copy the code and paste it in the body

Links

<a href="http://google.com"> click here to go to google </a>

Widgets

Open widget box

Choose a widget you like (about weather, number of visitors, games…)

Copy paste the code into the website

Headers (1 being the biggest , 7 the smallest)

<h1> Title 1</h1>

<h2>Title 2 </h2>

<h3> Title 3 </h3>

<h7> title 7 </h7>

Title

In the head section write

<title> this title will appear in the toolbar </title>

Formatting (bold, italic, or underlined)

<b> this text is in bold</b>

<u> this text is underlined </u>

<i> this text is italic </i>

Fonts (colors, sizes, types)

<font size="12" color="red" face="verdana">

The font will change here

</font>

Background colors

<body bgcolor="red">

Or

<body bgcolor="#112233">

Background image

<body background="imagename.extension">

20% on creativity and design

Goodluck!