20 Aug 1 – Creating a directory (folder) and your initial Notepad file
1 – Creating a directory (folder) and your initial Notepad file
Create a folder on your desktop to save your HTML pages in (call it “My web page”)
Start Notepad. Type the document tags below in your Notepad file.
This file will ultimately be your Homepage file.
1.JPG
2 – Now save the Notepad file to the HTML directory you created (the “My web page” folder)
Save your Notepad file in your HTML directory and name it index.txt.
Now close your index.txt file and then in the HTML directory folder rename the file index.html within the folder.
You can change the extension .txt of your Notepad file to .html to view the file and back to .txt to edit your progress as you start adding your HTML code.
NOTE: Opening your Notepad file with the .html extension will open it in the default internet browser installed in your computer to view it as a web page. Opening the file with the .txt extension will open the file in Notepad for editing.
Enter your custom title by typing it between the
for example:
2.JPG
3 – Add a heading that is bold & in italics
Place the cursor immediately under the tag. Press Enter to create a line, if needed.
Type
(Heading 1), (bold), (italics) then your choice of heading name. For example:
Your Name: This is my first homepage
After typing in the heading name, you must close the heading by typing (end bold),
(end italics),
After typing in the heading name, you must close the heading by typing (end bold),
(end heading 1).
Your finished heading line should look like this
3.JPG
4 – Add an image or picture
You may use any image or picture you like. If you don’t know where to get one, do Google search for a picture you like. Once you have found the image or picture you like, save it in the “My web page” folder.
Enter a new line under the Heading you created above and type the following line:
You may change the specs of the width, height, hspace and border as you wish for aesthetic purposes later.
Your image or picture line should look like this:
4.JPG
If the image or picture is not in the “My web page” folder, the webpage will not know where to look.
Make sure to place the picture in the “My web page” folder with the index.html file.
NOTE: If the image is changed and is given the same name and extension, the new picture will automatically reflect in the web page.
5 – Add a horizontal rule
Place the cursor immediately under the image or picture line (step 4), press Enter to create a line, if needed.
Add a horizontal rule tag:
6 – Add a paragraph
Place the cursor immediately under the horizontal rule tag (step 5), press Enter to create a line, if needed. Type the following line:
(sets the color for the text in the paragraph)
You have many color choices to use. The following link lists a few: https://www.w3schools.com/colors/colors_names.asp (Links to an external site.)
(this begins a paragraph)
Type your text, “This is my first web page. When it’s finished it will include:” (no quotes)
(this ends a paragraph)
Your new paragraph line should look like the following:
6.JPG
7 – Add an unordered list
Place the cursor immediately under the horizontal rule tag (step 6), press Enter to create a line, if needed. Type the following line:
(sets the font color of the unordered list, many choices: http://www.w3schools.com/html/html_colornames.asp (Links to an external site.)
- (begins the unordered list)
- Movies (bullet item 1)
- Games (bullet item 2)
- Music (bullet item 3)
(ends the unordered list)
Your new unordered list line should look like the following:
7.JPG
8 – Change the background color
Place the cursor immediately under the unordered list line (step 7), press Enter to create a line, if needed. Type the following line:
8.JPG
(choose any color, you have many choices https://www.w3schools.com/colors/colors_names.asp (Links to an external site.)
9 – Add a Hyperlink
Place the cursor immediately under the background color line (step 8). Press Enter to create a line, if needed. Type the following lines:
(quotes included)
I’m currently attending Grossmont College
Press enter then type,
Press enter then type,
Your new unordered list line should look like the following three lines:
9.JPG
10 – End your HTML tags
Place the cursor immediately under the line (step 9), press Enter to create a line, if needed. Make sure the following tags are the last tags of your code:
(ends the editing to the body of the page)
(ends the HTML code for the page)
Your end tag lines should look like the following:
11 – Check your code
Your entire block of code should look similar to the code in the image below.
index.jpg
12 – Save the page and view it
Click save. If you haven’t saved it already, please save it in the “My web page” folder.
Make sure it has been saved as index.html.
Double click and open the index.html file. This will open up the browser for you to view your webpage so far. You should see your new page appear in the browser, looking something like the example below.
REMEMBER: You should change the extension of your Notepad file from .txt to .html often to make sure you’re on the right path.
13 – Copy & Paste your code
You will Copy & Paste your code in the HTML Editor feature within this Canvas discussion, so we can all see your page without having to download a file. Read the following article for instructions on using the HTML Editor: HTML Editor (Links to an external site.)
14 – Resource Sites for your reference
HEX Color Codes for HTML: http://www.w3schools.com/html/html_colornames.asp (Links to an external site.)
HTML Tags: http://www.w3schools.com/html/default.asp (Links to an external site.)
Our website has a team of professional writers who can help you write any of your homework. They will write your papers from scratch. We also have a team of editors just to make sure all papers are of HIGH QUALITY & PLAGIARISM FREE. To make an Order you only need to click Ask A Question and we will direct you to our Order Page at WriteDemy. Then fill Our Order Form with all your assignment instructions. Select your deadline and pay for your paper. You will get it few hours before your set deadline.
Fill in all the assignment paper details that are required in the order form with the standard information being the page count, deadline, academic level and type of paper. It is advisable to have this information at hand so that you can quickly fill in the necessary information needed in the form for the essay writer to be immediately assigned to your writing project. Make payment for the custom essay order to enable us to assign a suitable writer to your order. Payments are made through Paypal on a secured billing page. Finally, sit back and relax.