Midterm
gopipatel
HTMLStepbyStepPt1.docxHTML Tutorial Summer 2015
Part 1
Note: This will cover basic codes covered in class. You will need to use this as a resource to complete your webpage.
Create a folder on the desktop and name it Web Folder. (Right click on desktop select new folder) name it web folder
Open Note Pad by selecting the Windows button on the keyboard and typing in NOTE Pad.
Creating your first Web Page
Copy the below text into NOTEPAD
<html>
<head> <title>The title goes here</title> </head>
<body>
<h1>This is a level one heading</h1>
<p>My first lovely paragraph. Wow. This is fun.</p>
<p>My second lovely paragraph. We can make paragraphs forever.</p>
<h2>This is a level two heading</h2>
<p>This is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag has an ending tag.</p>
</body>
</html>
Explanation of Code
<html>
<head> <title>The title goes here</title> </head>
Heading 1 Tag
<body>
<h1>This is a level one heading</h1>
Paragraph 1 Tag
<p>My first lovely paragraph. Wow. This is fun.</p>
<p>My second lovely paragraph. We can make paragraphs forever.</p>
<h2>This is a level two heading</h2>
<p>This is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag has an ending tag.</p>
</body>
</html>
Saving your webpage file
Save as indicated below BY selecting Save As. And typing homepage.html
Save As: Select your web folder located on the desktop and save the file in the folder.
Open the Web folder and you should see the homepage.html file. Note HTML is shown under type.
Tags
Sample of HTML Tag Definition
Open your Web Page
Open your page in Note pad and internet explorer by right clicking on the homepage.html file as shown below. Place your mouse right click open with Note Pad.
And again place your mouse over the homepage.html file right click open with Internet Explorer (IE).
You should have both files open.
With your mouse, select and drag the note pad window to the left of screen and let go of the button on the mouse. Then select the internet explore window and drag it to the right of the screen and let go of the button on the mouse as below.
Edit the Webpage
Find <H1> This is a level one heading </H1> on your note pad. This is your heading the <H1> indicates a code tag for heading one. Anything you type in between the <HI> </H1> will show in your webpage.
Change H1 text for heading one to read “ Home Page”. Save both the NOTEPAD file (Save). Select the IE Window and refresh (F5 keyboard).
Select File Save or CTRL+S on keyboard while having the NOTEPAD window open. Then select the IE window and select F5 on the keyboard to refresh the IE Window.
Change the Title of the Webpage to match H1 heading
Select The Tile information and replace with Home Page as shown below. Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Add Spacing To Note Pad
To add spacing in your NOTEPAD. Click enter in between spaces in Note Pad.
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Notice no spacing occurred in your Internet Explore IE browser.
To add space to IE Browser
Example code type <br> Notice the space below.
Add an Image
Let’s download 2 JPG images and rename them image1.jpg and image2.jpg no space in our desktop web folder.
Now let’s add the image code to our Home Page and edit our H2 heading.
First change the H2 heading to read “Insert Picture Below”. Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Copy the image code in red below to under “Home Page” and Under “Insert Picture Below”
Example Code type <img src="imagename.jpg" alt="alternative text" height="100" width="200">
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Change the name of the code <img src="imagename.jpg" alt="alternative text" height="100" width="200"> to <img src="image1.jpg" alt="alternative text" height="100" width="200"> and <img src="image2.jpg" alt="alternative text" height="100" width="200"> accordingly.
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Adding a Background Color to your Web Page
Type the following code in red before the </body> code on your Note Pad as shown below.
Example code <body style="background-color: #FFCCFF">
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Changing the Background Color
Copy code 4 from the code example
Select <body style="background-color: #FFCCFF"> and edit the code #FFCCFF to the one below.
Example code <body style="background-color: #C0C0C0">
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
To select a different color backgrounds go to code 4. http://www.w3schools.com/html/html5_intro.asp
Adding a Background image from your saved pictures
Make sure the image is saved in your web folder and the name of the file matches the web code.
Example code <body background="imagebk1.png">
Add the following code to the bottom of the HTMl home page as shown below. Code number 7
Example code type <body background="imagebk1.png">
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Notice that the image is repeating itself throughout the webpage.
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Make sure your image is a type of image set for a background image for best results like the one above. It is also helpful so that your text is readable.
To add an external website link
Example code Type <a href=http://www.nvcc.edu>MY NOVA.</a>
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Click on the MY NOVA link in IE. The Link should take you to the NOVA Web Site.
Now change MY NOVA in Note Pad to amazon.com as listed below.
Example code Type <a href=http://www.amazon.com>MY NOVA.</a>
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Select the MY NOVA link again in IE.
The link works but the name says MY NOVA in the IE browser.
Rename the name of the link <a href=http://www.amazon.com>Amazon.</a> in NOTE Page so that you don’t get confused.
Save both the NOTEPAD file (Save) and refresh IE Browser (F5 keyboard).
Making your second HTML webpage
Edit the second and third page
Open and edit your second page by changing the Title name and H1 heading 1 to Second page.
Change the background to a color or another image background
Example code
Delete the jaws one and add a color
<body style="background-color: #C0C0C0">
Move the Amazon link to “below your image 2 code line
Add space between the image and Amazon link by placing the <br> code line.
Linking your Second page to your Home page
Example code
<a href="homepage.html">This is my link to my Home Page</a>
Select this is my link to my Home Page link and it should take you to your home page.
Now let’s link our home page to our second page.
For this you will need to open your home page in notepad and copy the code from your second page
Example code
<a href="homepage.html">This is my link to my Home Page</a> and rename it to
<a href="secondpage.html">This is my link to my Second Page</a>
Make sure you rename the link to Second Page and create some space between your other items on the page. Save and refresh both NOTEPAD and IE browser.
End of Part 1
14
