Presentation is loading. Please wait.

Presentation is loading. Please wait.

How to Make a Web Page: A Crash Course in HTML programming.

Similar presentations


Presentation on theme: "How to Make a Web Page: A Crash Course in HTML programming."— Presentation transcript:

1 How to Make a Web Page: A Crash Course in HTML programming

2 The HTML File An HTML file is just an ordinary text file, usually with the.html or.htm extension. An HTML file can be easily created and modified with any familiar text editor. Such editors include note pad and word pad.

3 Basic Structure: text and tags An HTML document is basically just text, with different formatting commands, called tags, dispersed through it. Most commands have a start tag, enclosed by, and an end tag, enclosed by. Between the two tags is placed text (and other tags), which is then formatted according to the command specified by the tags.

4 Structure of a page A page is structured into different parts, each separated by different start and end tags: html, head, title, body, and headers.

5 Example 1 Hi there! My first homepage HTML is fun once you get the hang of it!

6 Text Formatting Tags For bold text, use tags and. For italics, use tags and For larger text, use and. For small text, use and. For a line break, insert the tag (there is no end tag for line breaks).

7 Example 2 This is normal. This is bold. This is italics. This is big. This is small.

8 Adding hyperlinks In order to add a hyperlink, use the tags:,. For instance, newspaper would create a link titled “newspaper” to the Washington Post website.

9 Adding Images In order to add an image use the tag. Note that there is no end tag for images.

10 Example 3 Check out my school. http://www.cs.yale.edu Or take a look at the hurricane!

11 Making Lists One can make a list with bullets: Beautiful Day Mysterious Ways Where the Streets Have No Name

12 Lists, cont Or one with numbers: Ferrero Roddick Federer

13 Example 4 Songs: Beautiful Day Mysterious Ways Where the Streets Have No Name Top Men's Tennis Players: Ferrero Roddick Federer

14 Background and Text Color In order to change the background or text color use the tag:. Or if you want to tile the background with a picture use the same tag but:.

15 Example 5

16 HTML editors With these commands, you can (and should) create a personal home page! It’s fun and not too difficult. Alternatively, you can avoid directly writing HTML by using special programs like Netscape Composer.

17 Any Questions???

18 Web Form Basics

19 What is a web form? A web form is a web page in which the user may enter information. The entered data are then processed by a program called a script, which then does something useful.

20 Starting a web form A web form section starts with the tag:. And ends with the tag:.

21 Making a text input line The command for a text input line is of the form:. This will create a text input line, with the same length as 54 characters. The script will then be given the input as text labeled “book”.

22 Radio Buttons Radio buttons: Humanities Sciences This will create two buttons, from which the user may only choose one. The buttons specify a field called “class type” that will be used by the script.

23 Check Boxes Command very similar to radio buttons: Brother Sister Here, the user may check multiple boxes, rather than just one.

24 Choosing from Lists In order to create a list: Computer Science Economics English History Mathematics Physics

25 Etc. There are other types of inputs, including menus that drop and text input boxes, which are explained on the HW1 assignment web page.

26 The Submit Button Very Essential: we must create the submit button. The user clicks this in order to submit his information. This is accomplished with the line of code:

27 Putting it all together: Example 6 Example 6 Email Address:

28 Example Form Elements

29 Questions??


Download ppt "How to Make a Web Page: A Crash Course in HTML programming."

Similar presentations


Ads by Google