Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download how to create a web page in html
Transcript
HOW TO CREATE A WEB PAGE IN HTML Web sites are made by creating web pages with HTML code and linking the pages together. The HTML web page codes are called ‘tags’. Here are some tips to help you create your first web page. About the tags In order for the pages to display correctly in the web browser, all tags must begin and end with an angle bracket. < > (The tag names are not case-sensitive) The following 4 tags must appear in this order on each page in this order: <HTML> <HEAD> <TITLE> enter your page title here </TITLE> </HEAD> <BODY> The following 2 tags must be placed on the bottom of the HTML document. </BODY> </HTML> ______________________________________________________________________ To end a tag, you put a / in front of a word. Example </TITLE> when you are done using the title tag. IMPORTANT REMINDER: Nothing can go above the <HTML> AND nothing can go below the </HTML> Adding color and style to your page BGCOLOR: Add BGCOLOR inside the body tag to change the background color of your text. Example: <BODY BGCOLOR=”blue”> LINK COLOR: You can also change the color of your hyperlinks by placing these codes inside the body tag. <BODY BGCOLOR=”blue” LINK=”green” ALINK=”yellow”> LINK- Changes the color of the hyperlink that is usually blue VLINK- Changes the color of Visited Link, the link that is usually turns purple after you have visited the page. ALINK- Changes the color of the hyperlink as you click on it. FONT: <FONT> is used to change the color, size and type face of the text <FONT FACE=”Arial” COLOR=”white” SIZE=”+2”> Go To: WWW.HTML-COLOR-CODES.COM for a list of specific colors. Ex. COLOR=’33cc99” TEXT SIZE: Use the heading tag to change the size of your text. <H1> Use this tag to create very large text. <H2> A bit larger <H3> Normal sized text <H4> A bit smaller <H5> Small text <H6> Use this tag to make VERY SMALL text BOLD: <b> to bold text ITALICIZE: <i> to italicize text MARQUEE: The <MARQUEE. Tag allows text to scroll across the screen. Unfortunately it is not supported in all browsers, but it is fun to use! Don’t forget to use </MARQUEE> to stop scrolling. NEED MORE SPACE? Line Break: <BR> adds 1 line break. You can add multiple line breaks to put more space between the lines. Character Spacing: is a non-breaking space. Duplicate this tag to add multiple spaces in between letters and words. Ex: This tag is different because it doesn’t require any angle brackets. Please note that is case sensitive. You must type it in lowercase letters or it will not work. Center text: <CENTER> Don’t forget </CENTER> when you are done centering the text. Creating Numbered and Unnumbered lists: To create a bulleted list use the <ul><li></li></ul> tags and shown in the below example. <ul> <li>Arizona</li> <li>Utah</li> <li>Nevada</li> </ul> The above example would create a bulleted list as shown in the below example. Arizona Utah Nevada If you wanted to change this list to a numbered list change the <ul></ul> tags to <ol></ol>, as shown in the below example. <ol> <li>Arizona</li> <li>Utah</li> <li>Nevada</li> </ol> The above example would create a numbered list as shown in the below example. 1. Arizona 2. Utah 3. Nevada Adding images IMAGES: You must include the file name of your picture in the image source tag in order for it to show up on your web page. For example <IMG SRC=”usa map.jpg”> is the code I would use to put a picture of the map of the United States on my homepage. The 3 letters after the dot tell the browser what kind of the file it is and you must include those 3 letters in the file name or your picture won’t show up on your page. (file types for images are typically jpg, gif, bmp, png) Is your picture too big? You can add the HEIGHT and WIDTH parameter inside the IMG SRC tag, for example: <IMG SRC=”usa map.jpg” height= “341” width=”246”> Note: the height and width size are listed in pixels. Adding links to other pages, web sites and email TO HYPERLINK HTML PAGES: To link your web pages together, use the following tag: <A HREF=”filename.html”> text that you want to appear on the page</A> For example, to create the navigation to link two pages of my Patriots web site, I would insert these 2 lines of code (see example on the last page of this document to see how this would look in your web page browser): <A HREF=”summerhome.html”>home</A> <A HREF=”locations.html”>Our Southwest Vacation</A> TO LINK TO ANOTHER WEB SITE: <A HREF=http://www.milfordpublicschools.com> Go to the Milford High School Web Site</A> TO CREATE A LINK TO YOUR EMAIL ADDRESS: <A HREF=”MAILTO:[email protected]”> Send email to Mrs. Johnson </A> Saving the files You must create your web page in notepad. When saving the file for the first time, perform these steps to make sure the file is saved in HTML format. This tells the browser to open the file as a web page. File ->Save As File name: type your filename and add a .html to the end of the file name. Then Save as type: All files (see example below) Need more than one page? There’s no need to type code for every web page you create. It’s easy to save the original page (for example, home.html) and then make a copy by choosing file->save as and saving the file with a different name. Here’s how: Creating the 2nd, 3rd, 4th….web page When you are done creating the first page, save the file with for example home.html Next you will make a copy of the page by saving it with a different name, for example, patriots.html. You now have two web pages, one called home.html and another called patriots.html. Now you can open the 2nd page for example patriots.html in notepad and add/change the text and pictures to make it look like a different page. Take a look below to see an example of the code for a basic web page and a picture of what that web site would look like in the browser. See next 2 pages for examples of code and web page This is an example of the code: </html> This is the web page when viewed in a web browser:
