- \n
- Create a folder on your desktop to save your HTML<\/strong> pages in (call it “My web page<\/strong>“)<\/li>\n
- Start Notepad<\/strong>. Type the document tags below in your Notepad<\/strong> file.<\/li>\n
- This file will ultimately be your Homepage<\/strong> file.<\/li>\n<\/ol>\n
<\/p>\n
2 – Now save the Notepad file to the HTML directory you created<\/strong> (the “My web page<\/strong>” folder)<\/p>\n
- \n
- Save your Notepad <\/strong>file in your HTML directory and name it index.txt<\/strong>.<\/li>\n
- Now close your index.txt file and then in the HTML directory folder rename the file index.html<\/strong> within the folder.\n
- \n
- You can change the extension .txt<\/strong> of your Notepad<\/strong> file to .html<\/strong> to view <\/strong>the file and back to .txt <\/strong>to edit <\/strong>your progress as you start adding your HTML<\/strong> code.<\/li>\n
- NOTE<\/strong>: Opening your Notepad<\/strong> file with the .html<\/strong> extension will open it in the default internet <\/strong>browser<\/strong> installed in your computer to view it as a web page. Opening the file with the .txt<\/strong> extension will open the file in Notepad<\/strong> for editing<\/strong>.<\/li>\n<\/ul>\n
Enter your custom title by typing it between the <title> <\/strong>and the <\/title><\/strong><\/li>\n<\/ol>\n
- \n
- \n
- \n
- for example<\/strong>: <title><\/span>My First Website<\/strong><\/title><\/span><\/li>\n
<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
3 – Add a heading that is bold & in italics<\/strong><\/p>\n
- \n
- Place the cursor immediately under the <body><\/strong> tag. Press Enter<\/strong> to create a line, if needed.<\/li>\n
- Type <h1><\/strong> (Heading 1), <b><\/strong> (bold), <i><\/strong> (italics) then your choice of heading name. For example: <h1><b><i><\/span>Your Name: This is my first homepage<\/strong><\/li>\n
- After typing in the heading name, you must close the heading by typing <\/b><\/strong> (end bold), <\/i> (<\/strong>end italics), <\/h1><\/strong> (end heading 1).<\/li>\n
- Your finished heading line should look like this\n
- \n
<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
4 – Add an image or picture<\/strong><\/p>\n
- \n
- You may use any image or picture you like. If you don\u00e2\u20ac\u2122t know where to get one, do Google<\/strong> search for a picture you like. Once you have found the image or picture you like, save it in the \u00e2\u20ac\u0153My web page\u00e2\u20ac\u009d<\/strong> folder.<\/li>\n
- Enter a new line under the Heading<\/strong> you created above and type the following line:\n
- \n
- <<\/span>img src=<\/strong> (this stands for Image Source<\/strong>)<\/li>\n
- “the_title_of_your_image.jpg”<\/strong> (this name and extension needs to reflect the actual name ad extension of your image<\/strong> or picture<\/strong>)<\/li>\n
- width<\/strong>=134<\/li>\n
- height<\/strong>=200<\/li>\n
- hspace<\/strong>=5 (specifies the amount of space on either side of image)<\/li>\n
- border<\/strong>=0><\/span><\/li>\n
- You may change the specs of the width<\/strong>, height<\/strong>, hspace<\/strong> and border<\/strong> as you wish for aesthetic purposes later.<\/li>\n<\/ul>\n<\/li>\n
- Your image or picture line should look like this:\n
- \n
-
<\/strong><\/li>\n<\/ul>\n<\/li>\n
- If the image or picture is not in the \u00e2\u20ac\u0153My web page\u00e2\u20ac\u009d<\/strong> folder, the webpage will not know where to look.<\/li>\n
- Make sure to place the picture in the \u00e2\u20ac\u0153My web page\u00e2\u20ac\u009d<\/strong> folder with the index.html<\/strong> file.\n
- \n
- NOTE<\/strong>: If the image is changed and is given the same name and extension, the new picture will automatically reflect in the web page.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
5 – Add a horizontal rule<\/strong><\/p>\n
- \n
- Place the cursor immediately under the image or picture line (step 4)<\/strong>, press Enter<\/strong> to create a line, if needed.<\/li>\n
- Add a horizontal rule tag: <hr><\/strong><\/li>\n<\/ol>\n
6 – Add a paragraph<\/strong><\/p>\n
- \n
- Place the cursor immediately under the horizontal rule tag (step 5)<\/strong>, press Enter<\/strong> to create a line, if needed. Type the following line:<\/li>\n
- <font color=#000000><\/strong> (sets the color for the text in the paragraph)\n
- \n
- 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.)<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n
- <p><\/strong> (this begins a paragraph) <\/li>\n
- Type your text, \u00e2\u20ac\u0153This is my first web page. When it\u00e2\u20ac\u2122s finished it will include:<\/strong>\u00e2\u20ac\u009d (no quotes)<\/li>\n
- <\/p><\/strong> (this ends a paragraph)<\/li>\n
- Your new paragraph line should look like the following:\n
- \n
<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
7 – Add an unordered list<\/strong><\/p>\n
Place the cursor immediately under the horizontal rule tag (step 6)<\/strong>, press Enter<\/strong> to create a line, if needed. Type the following line:<\/p>\n
- \n
- <font color=#B4045F><\/strong> (sets the font color of the unordered list, many choices: http:\/\/www.w3schools.com\/html\/html_colornames.asp (Links to an external site.)<\/span><\/a><\/li>\n
- <ul><\/strong> (begins the unordered list)<\/li>\n
- <li><\/strong>Movies (bullet item 1)<\/li>\n
- <li><\/strong>Games (bullet item 2)<\/li>\n
- <li><\/strong>Music (bullet item 3)<\/li>\n
- <\/ul><\/strong> (ends the unordered list)<\/li>\n
- Your new unordered list line should look like the following:\n
- \n
<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
8 – Change the background color<\/strong><\/p>\n
- \n
- Place the cursor immediately under the unordered list line (step 7<\/strong>), press Enter<\/strong> to create a line, if needed. Type the following line:
<\/li>\n
- (choose any color, you have many choices https:\/\/www.w3schools.com\/colors\/colors_names.asp (Links to an external site.)<\/span><\/a><\/li>\n<\/ol>\n
9 – Add a Hyperlink<\/strong><\/p>\n
- \n
- Place the cursor immediately under the background color line (step 8<\/strong>). Press Enter<\/strong> to create a line, if needed. Type the following lines:<\/li>\n
- <a href=<\/strong> (stands for Hypertext Reference)<\/li>\n
- “http:\/\/www.grossmont.edu”><\/strong> (quotes included)<\/li>\n
- I’m currently attending Grossmont College<\/a><\/strong><\/li>\n
- Press enter then type, <p><br><\/strong><\/li>\n
- Press enter then type, <\/p><\/strong><\/li>\n
- Your new unordered list line should look like the following three lines:
<\/strong><\/li>\n<\/ol>\n
10 – End your HTML tags<\/strong><\/p>\n
- \n
- Place the cursor immediately under the <\/object><\/strong> line (step 9<\/strong>), press Enter <\/strong>to create a line, if needed. Make sure the following tags are the last tags of your code:\n
- \n
- <\/body><\/strong> (ends the editing to the body of the page)<\/li>\n
- <\/html><\/strong> (ends the HTML code for the page)<\/li>\n<\/ul>\n<\/li>\n
- Your end tag lines should look like the following:\n
<\/body>
<\/html><\/strong><\/li>\n<\/ol>\n11 – Check your code<\/strong><\/p>\n
Your entire block of code should look similar to the code in the image below. <\/p>\n
<\/p>\n
12 – Save the page and view it<\/strong><\/p>\n
- \n
- Click save. If you haven\u00e2\u20ac\u2122t saved it already, please save it in the \u00e2\u20ac\u0153My web page\u00e2\u20ac\u009d<\/strong> folder.<\/li>\n
- Make sure it has been saved as index.html<\/strong>. <\/li>\n
- Double click and open the index.html<\/strong> 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.\n
- \n
- REMEMBER<\/strong>: You should change the extension of your Notepad<\/strong> file from .txt<\/strong> to .html<\/strong> often to make sure you’re on the right path.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
13 – Copy & Paste your code<\/strong><\/p>\n
You will Copy & Paste<\/strong> your code i<\/span>n the HTML<\/strong> Editor <\/strong>feature within this Canvas <\/strong>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.)<\/span><\/a><\/p>\n
14 – Resource Sites for your reference<\/strong><\/p>\n
HEX Color Codes for HTML:<\/strong> http:\/\/www.w3schools.com\/html\/html_colornames.asp (Links to an external site.)<\/span><\/a>
HTML Tags:<\/strong> http:\/\/www.w3schools.com\/html\/default.asp (Links to an external site.)<\/span><\/a><\/p><\/p>\n","protected":false},"excerpt":{"rendered":"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. 2 – Now save the Notepad file to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_joinchat":[]},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/posts\/126952"}],"collection":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/comments?post=126952"}],"version-history":[{"count":0,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/posts\/126952\/revisions"}],"wp:attachment":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/media?parent=126952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/categories?post=126952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/tags?post=126952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Make sure it has been saved as index.html<\/strong>. <\/li>\n
- <\/html><\/strong> (ends the HTML code for the page)<\/li>\n<\/ul>\n<\/li>\n
- <\/body><\/strong> (ends the editing to the body of the page)<\/li>\n
- <a href=<\/strong> (stands for Hypertext Reference)<\/li>\n
- (choose any color, you have many choices https:\/\/www.w3schools.com\/colors\/colors_names.asp (Links to an external site.)<\/span><\/a><\/li>\n<\/ol>\n
- Place the cursor immediately under the unordered list line (step 7<\/strong>), press Enter<\/strong> to create a line, if needed. Type the following line:
- <ul><\/strong> (begins the unordered list)<\/li>\n
- <font color=#B4045F><\/strong> (sets the font color of the unordered list, many choices: http:\/\/www.w3schools.com\/html\/html_colornames.asp (Links to an external site.)<\/span><\/a><\/li>\n
- <p><\/strong> (this begins a paragraph) <\/li>\n
- <font color=#000000><\/strong> (sets the color for the text in the paragraph)\n
- Add a horizontal rule tag: <hr><\/strong><\/li>\n<\/ol>\n
- Place the cursor immediately under the image or picture line (step 4)<\/strong>, press Enter<\/strong> to create a line, if needed.<\/li>\n
- If the image or picture is not in the \u00e2\u20ac\u0153My web page\u00e2\u20ac\u009d<\/strong> folder, the webpage will not know where to look.<\/li>\n
- “the_title_of_your_image.jpg”<\/strong> (this name and extension needs to reflect the actual name ad extension of your image<\/strong> or picture<\/strong>)<\/li>\n
- Enter a new line under the Heading<\/strong> you created above and type the following line:\n
- You may use any image or picture you like. If you don\u00e2\u20ac\u2122t know where to get one, do Google<\/strong> search for a picture you like. Once you have found the image or picture you like, save it in the \u00e2\u20ac\u0153My web page\u00e2\u20ac\u009d<\/strong> folder.<\/li>\n
- Type <h1><\/strong> (Heading 1), <b><\/strong> (bold), <i><\/strong> (italics) then your choice of heading name. For example: <h1><b><i><\/span>Your Name: This is my first homepage<\/strong><\/li>\n
- for example<\/strong>: <title><\/span>My First Website<\/strong><\/title><\/span><\/li>\n
- NOTE<\/strong>: Opening your Notepad<\/strong> file with the .html<\/strong> extension will open it in the default internet <\/strong>browser<\/strong> installed in your computer to view it as a web page. Opening the file with the .txt<\/strong> extension will open the file in Notepad<\/strong> for editing<\/strong>.<\/li>\n<\/ul>\n
- Now close your index.txt file and then in the HTML directory folder rename the file index.html<\/strong> within the folder.\n
- Start Notepad<\/strong>. Type the document tags below in your Notepad<\/strong> file.<\/li>\n