The document provides an overview of HTML basics including how to structure an HTML document, common tags like headings, paragraphs, and lists, and how to add images, links, and forms. Key elements covered include the <html>, <head>, <title>, and <body> tags, heading tags from <h1> to <h6>, paragraph tags, unordered and ordered lists, tables, links, images, and basic form elements like text fields, radio buttons, checkboxes, and submit buttons.
The document provides an overview of HTML basics including how to structure an HTML document, common tags like headings, paragraphs, and lists, and how to add images, links, and forms. Key elements covered include the <html>, <head>, <title>, and <body> tags, heading tags from <h1> to <h6>, paragraph tags, unordered and ordered lists, tables, links, images, and basic form elements like text fields, radio buttons, checkboxes, and submit buttons.
The document provides an overview of HTML basics including how to structure an HTML document, common tags like headings, paragraphs, and lists, and how to add images, links, and forms. Key elements covered include the <html>, <head>, <title>, and <body> tags, heading tags from <h1> to <h6>, paragraph tags, unordered and ordered lists, tables, links, images, and basic form elements like text fields, radio buttons, checkboxes, and submit buttons.
The document provides an overview of HTML basics including how to structure an HTML document, common tags like headings, paragraphs, and lists, and how to add images, links, and forms. Key elements covered include the <html>, <head>, <title>, and <body> tags, heading tags from <h1> to <h6>, paragraph tags, unordered and ordered lists, tables, links, images, and basic form elements like text fields, radio buttons, checkboxes, and submit buttons.
Download as PPT, PDF, TXT or read online from Scribd
Download as ppt, pdf, or txt
You are on page 1/ 35
HTML Basics
What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable in a browser The basic language used to write web pages File extension: .htm, .html Creating a HTML File 1. Open Notepad or any other web editor 2. Click on File -> Save as… 3. In the File name pull-down box, type in webpage.html 4. Click on Save 5. Type in content for your file 6. Once you finished the content, click on File - > Save HTML Document Structure <html> <head> <title> Page Title Goes Here </title> </head>
<body> content goes here </body> </html> HTML Basics <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>And this is the second paragraph.</P> </body> </html> HTML Basics Markup Tags HTML This element tells your browser that the file contains HTML-coded information. The file extension .html also indicates this is an HTML document and must be used. HTML Basics HEAD The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window TITLE The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself. HTML Basics BODY The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). All other tags now come within the body tag. HTML Basics Headings HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>. The syntax of the heading element is: <Hy>Text of heading </Hy> where y is a number between 1 and 6 specifying the level of the heading. Headings The 6 heading commands.
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
HTML Basics Paragraphs Unlike documents in most word processors, carriage returns in HTML files aren't significant. In fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are automatically compressed into a single space when your HTML document is displayed in a browser. A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag HTML Basics For example: <b>, <font>,<title>, <p> etc. Tag usually goes with pair: an open tag (<b>) and an end tag (</b>)
Effect Code Code Used What It Does
Bold B <B>Bold</B> Bold Italic I <I>Italic</I> Italic
Single tag: <hr>,<br>
Tags are NOT case sensitive Simple page of Code <html> <head><title>First Page</title></head> <body> Hello! This is my first page of code. I can't believe I'm on my way to being a webmaster. This is so great!!! </body> </html> What does that look like? Did you notice anything? Regular text No break when an ENTER was keyed Nothing exciting about page. Formatting is needed Look at some additions (changes in Red) <html> <head><title>First Page</title></head> <body bgcolor="blue"> <hr> Hello! This is my first page of code. I can't believe I'm on my way to
being a webmaster.<p> This is so great!!! <hr> </body> </html> Here’s what those did… What changed? Background color Breaks in text Horizontal rules All with just a few keystrokes Background Bgcolor Background Specifies a background- Specifies a background- color for a HTML page. image for a HTML page <body bgcolor="#000000"> <body <body background="clouds.gif"> bgcolor="rgb(0,0,0)"> <body <body bgcolor="black"> background="http://www.w 3schools.com/clouds.gif"> Text Put text on a webpage <p>Today is my first day at my new job, I’m so excited! </p> Output: Today is my first day at my new job, I’m so excited! Put text in center of a page <center>Hello</center> Output: Hello Put text on the right of a page <p align=“right”>Hello</p> Output: Hello Font To change text size <font size=“+3”>Hello</font> Output: Hello Tag attribute
A Email link <a href=“mailto:[email protected]”> Email me</a> Output: Email me Inserting Image Place all images in the same directory/folder where you web pages are <img src> is a single tag <img src=“image.gif”> Output: Turn an image into a hyerlink <a href=“http://www.iusb.edu”><img src=“image.gif”></a> Output: Image Size Computer images are made up of “pixels” <IMG HEIGHT=“100" WIDTH=“150" SRC="image.gif">
Height
Width Forms A form is an area that can contain form elements. <form></form> Commonly used form elements includes: Text fields Radio buttons
Checkboxes
Submit buttons Text Input Fields Used when you want the Output user to type letters, number, etc. First name: <form> Last name: First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> Submission Button When user clicks on the Output “Submit” button, the content of the form is sent to another file. Username: <form name="input" action="html_form_action.a sp" method="get"> Username: <input type="text" name="user"> <br> <input type="submit" value="Submit"> </form> Checkboxes Used when you want the Output user to select one or more options of a limited number I have a bike of choices. I have a car <form> <input type="checkbox" name="bike“ value=“bike”> I have a bike <br> <input type="checkbox" name="car“ value=“car”> I have a car </form> Radio Buttons Used when you want the Output user to select one of a limited number of choices. Male <form> Female <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> Text Box Used when you want to get • Output input from user. <form> Please provide your <p>Please provide your suggestion in the text box suggestion in the text box below: below:</p> <textarea row=“10” cols=“30”> </textarea> </form> Pull-down Menu Used when you want user to • Output respond with one specific answer with choices you Select a fruit: given. <p>Select a fruit:</p> <select name"Fruit"> <option selected> Apples <option> Bananas < option > Oranges </select> End of Slides Thank You! If you have any question?
