Build your first Webpage
HTML - Hyper Text Markup Language
Getting Started
|
1.) Open your documents
2.) Create a new folder called "website" 3.) Right click on the folder and click "open as brackets project" 4.) You should have a screen like this: 
|
|
Create a welcome page
|
1.) Click "File" --> "New"
2.) Click "File" --> "Save as" or "Ctrl" + "s" 3.) Save a "index.html" For most webpages index is the first page, any file name with the extension ".html" will automatically be opened as a web page. 4.) Type this at the top: <!doctype html> (This lets the document know it is a web page) 5.) Type this <h1>Your Message Here</h1> underneath the doc type tag 
|
Launch the website
|
Inquiry Time - Tags
|
We use tags like this: <b> </b> to make things bold or a heading or insert images.
tags control web pages. Try to learn what the tags on the right do. Please read through w3 schools for more information: https://www.w3schools.com/html/ Try and create this page exactly: |
|
Creating Multiple Pages
|
Please refer to https://www.w3schools.com/html/html_links.asp for more info
index.html We use index.html, because web servers know that this is the first page to look for. Index.html should always be the homepage for your website. Creating new pages Create a second page about Wario, it should look like the one on the right. Save it into the same folder using the page name wario.html You should have a folder that looks like this: 
|
|
HTML Formatting Guide
Read these formatting rules:
https://google.github.io/styleguide/htmlcssguide.html#HTML_Formatting_Rules
Go back and reformat your Wario and Waluigi pages
https://google.github.io/styleguide/htmlcssguide.html#HTML_Formatting_Rules
Go back and reformat your Wario and Waluigi pages
Linking the pages together
|
1.) Create a to links at the top that should look like the ones on the picture on the right.
2.) Link the pages using href... It should automagically pop up with the two pages you have created. 3.)Copy the code to both pages. You should now be able to navigate between the pages. 
|
|
Using picture files in separate locations
Sometimes for some reasons you will have files in different locations, that you will need to access.
Download three waluigi pictures and store them in the following locations:
(Take note of the folder location).
Download three waluigi pictures and store them in the following locations:
(Take note of the folder location).
|
|
|
In order to access the picture you will need to use some relative pathways
Image 1 src="../Waluigi%20Image%20One.jpg"
Image 2 src="waluigiImage2.png"
Image 3 src="waluigi3.png"
Task: Set the folders up with the pictures and get them working!
Image 1 src="../Waluigi%20Image%20One.jpg"
Image 2 src="waluigiImage2.png"
Image 3 src="waluigi3.png"
Task: Set the folders up with the pictures and get them working!
Problem Solving
I have given you 4 different websites to fix as tags are in the wrong place
You should see the before and afterwards. Enjoy:
You should see the before and afterwards. Enjoy:
| bugged_websites.zip |
Broken Website
|
Fixed Website
|
Tables
|
Tables allow us to organize information in a readable format
<table> - Declares a table <tr> - Declares a row <th> - Declares a heading <td> - Declares any inputted information <td colspan="2"> would make a row span over 2 columns <td rowspan="2"> would make a column span over 2 rows |
|
|
Task : Use html to make the table on the right
Hint: You will need to start with <table border="5> Also there are 2 column spans and 2 row spans |
|
