Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Lesson 1: Creating Your First Webpage Intro to Web Design Step One Open Notepad Click Start > Program > Accessories > Notepad All web pages need to be created using Notepad Key Code <HTML>, </HTML> - Tells the web browser that everything following this tag will be a web page. <HEAD>, </HEAD> - A place in your web page in which to store information that will NOT be displayed on your page (Author of the web page, keywords, etc.). <TITLE>, </TITLE> - Whatever is placed in between the <TITLE> and </TITLE> tag will appear only in the blue bar at the top of your web browser. <BODY>, </BODY> - Lets the computer know that everything following this tag will be displayed on the web page. Here is how it looks... Notice the Format used when typing in the code…You will want to use this format for each web page This title will show up in the blue bar at the top of the screen This text will show up on your web page Turning the file into a web page In order for your Notepad file to become a web page, you must save it with a “.HTML” extension on the end. Otherwise it will only be a Notepad file! Go to File/Save As, then give it name with the HTML extension. For example: “lab1.html” Save this file into your Web Design Folder Viewing your web page You can view your page, by locating the file and double clicking on it Your file should look like this... When you double click on the file, Internet Explorer will automatically open your page and let you look at it. You can also start Explorer then click on File and Open (CTRL + O) Here is what your webpage looks like in Internet Explorer. Notice the Title Notice the text Creating a Line Break <BR> - This will move any text you want to show up on your web page to the very next line. You can use more than one line break to create more spacing <BR><BR><BR> Paragraph Breaks <P> </P> This will create a “double space” around a paragraph. For example: <P>This is my web site. It contains all information related to me and the work that I do. Select any link you like and enjoy what is inside. Have fun. This paragraph is enclosed by the paragraph tags. It will separate this paragraph from any other text on the page.</P> Horizontal Rules <HR> - Creates a Horizontal line across your web site. Changing the thickness of the horizontal line, add the SIZE attribute: <HR SIZE=10> You can also change the width and color of the line by adding the WIDTH and COLOR attributes: <HR SIZE=10 WIDTH=10 COLOR=RED> Your Assignment Create a web page using each “Tag” that you have learned today: – – – – <HTML>, </HTML> <HEAD>, </HEAD> <TITLE>, </TITLE> <BODY>, </BODY> Follow the format given on slide number 3. Be sure to use a different line when writing the code. In the body of the web page, write three paragraphs Para 1. Introduce yourself Para 2. What are your hobbies and interests? Para 3. What are your academic and life goals? Keep your paragraph between 5-7 sentences. Separate each paragraph using the <P> tag. Don’t forget to close the tag - </P> Insert a Horizontal line between each paragraph. (set the color, size and width for each line) Use line breaks <BR> where appropriate. Save your first webpage as, “introduction.html”