Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.

• Slide 1

Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple text editor like Notepad. To start writing HTML, run the program called Notepad by typing in its name or finding it under all programs -> Accessories -> Notepad. Slide 2 A HTML page has a heading section and a paragraph section. The beginning of an HTML section always starts with a command in and ends with. Create your first document as shown below. Slide 3 R UNNING THE FILE. After you save the text file with the extension.html, it will open in a web browser. Try saving your first web page made on the previous slide and then clicking on it. Be careful: if you want to edit the file and make changes you cant double click on it. Right click on it to find edit options instead. Slide 4 Adding links to the html page Some times a page wants to have a link to another page. Try adding a link on your web page like this one: Notice that the command starts with. Add some links to web ages of your choice by copying that line and changing the link and description. Slide 5 Getting started My first html Running the file Adding Links Slide 6 A DDING P ICTURES IN HTML If you can find an image on the internet, you can include it on your page. Some sites encourage this and some will take measure to prevent it. See the picture shown as a person clicked on a happy picture of a sunny and copied the link shown in the browser URL window. The link is then added to html code. Slide 7 The img command lets people add pictures to their web page. Use the format shown in the title except replace the word picture.gif with the link of the picture being used. A web page can have just one picture or it could have many thousands. Add some good pictures to your web page. Slide 8 So far we have learned how to add pictures and how to add links. When using the then the image will be part of the link and people who click on it will go to the link when on the internet. Slide 9 E XAMPLE TEXT The following example will put a picture of a Google icon on a web page and link it to a Google Search. Add the Google search to your web page. Be sure to replace whatever.jpg with a link to a picture. : Slide 10 Review Adding pictures in HTML Using Pictures as Links Example text Slide 11 starts a new line. starts a new paragraph, same as new line but adds a blank line. Write a sentence in your web page and end it with a Slide 12 T EXT F ORMATTING this text will be bold puts text between the tags in bold. this text will be in italics puts text between the tags in italics. this text will be underlined makes text between the tags underlined. Use all 3 of these commands on your web pages text to practice them. Slide 13 Heading large heading text puts text between commands as a large heading. sub-heading text puts text as a sub-heading. In the heading section of your web page, enter your name with different heading sizes from 1 to 7. Slide 14 center text centers text and images on the page. There are other ways to align the text as well. If the center word is changed the alignment is changed. Try typing and centering some text on your web page. Slide 15 REVIEW New line/ New paragraph Text Formatting Heading Centering text Slide 16 Separating parts of the page with lines puts a long line across the page. puts a short line across the page. Add a line across the whole page. Add a line across half the page. Slide 17 Some times a table can be used to help the format of how information or pictures is placed on a page. A table starts and ends with the command and Each row is created with and Each data cell is separated with and Slide 18 T ABLE C ODE Slide 19 Creating the table Create a table with two columns and 15 rows Each row will have two and Each of the two data cells per row will have and The data will be filled in with the project rubric on slide 21 and 22. Slide 20 Separating parts of the page with lines Add a table to the web page Table Code Creating the table Slide 21 The project rubric will score how well this introduction web page. There will be a column for the name of each item available. There will be a column for possible points There will be a column for points earned. Slide 22 Rubric: 7 points per item 1 Created an html document 2 heading/body 4 Added links 6/7 added pictures 8 added a linked picture 9 added a Google linked picture 11 used and command 12 showed format examples Slide 23 13 added heading 1-7 14 centered text 16 added full 16 added half line 17 19 table slide column 17 19 table score column Added sum of score. Slide 24 W EB P AGES : T HE NEXT STEP The examples shown in this unit are a basic introduction. Fortunately, html is very well documented on the Internet. To find out what to do, try searching for an example. To see how to make a table, search html table example. A new html developer will have to look up a lot of things until developing more practice. Slide 25 Review Project Rubric Rubric: 7 points per item Rubric Continued Web Pages: The Next Step