1 / 14

HTML Basics

HTML Basics. HTML: The Language of the Web. Web pages are text files, written in a language called Hypertext Markup Language or HTML . HTML allows Web authors to create documents that can be displayed across different operating systems.

kgiles
Download Presentation

HTML Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Basics Instructor: A. Burns

  2. HTML: The Language of the Web • Web pages are text files, written in a language called Hypertext Markup Language or HTML. • HTML allows Web authors to create documents that can be displayed across different operating systems. • HTML code is easy to use, that even nonprogrammers can learn to use it. • HTML describes the format of Web pages through the use of tags. • Web browser interprets html tags and render the text accordingly • Different Web browsers might display the pages differently! Instructor: A. Burns

  3. Creating Web pages In order to create your own web page you need: • A text editor. You may not use an HTML editor for this class. (ex: Notepad is in, FrontPage is out!) • An HTTP browser for testing the pages(Internet Explorer >= 5.5 will be our standard) • A Web server on which to store your files and make them available for viewing. Instructor: A. Burns

  4. Extensions • HTML files must be saved with a .html or .htm • extension. • HTML editors do this automatically. • You must do it manually when using a text • editor such as Notepad. Instructor: A. Burns

  5. HTML Syntax • Document content is what the users sees on the page, such as headings and images. • Tags are the HTML codes ‘underneath’ the document. • Tags control the appearance of the document content. • tag is the name of the HTML tag • attributes are properties of the tag <tag attrib=“attribute value”> text </tag> • Tags are not case sensitive. • You can see the HTML of most web pages by clicking View/Source on the menu bar. Instructor: A. Burns

  6. HTML tag syntax • Generally tags come in two parts <html>….</html> • Opening tag:<html> • Closing tag:</html> The two parts mark off a part of the text and specify its format • Appearance of the web page depends also on the specific browser settings, and the user’s system and monitor. Instructor: A. Burns

  7. Basic tag types • Document tags: identify the various parts of the document (Head, Body) • Text structure tags: determine the layout of the text (lists, paragraphs) • Style tags: tell the browser how to display the text • Image tags: to incorporate images • Anchor tags: to create hyperlinks Instructor: A. Burns

  8. Document tags • <html> … </html> Mark the beginning and end of the html file • <head> … </head> Text in this part of the document is NOT displayed in the browser’s window. It includes other tags like <title> and <meta> • <title> … </title> Displayed in the browser’s title bar. It is used as the default bookmark description. • <body> … </body> The contents displayed in the browser’s window. Instructor: A. Burns

  9. The bare minimum <html> <head> <title>Home Page for Alan Burns </title> </head> <body>Hello world </body> </html> In FrontPage, create a new page and view the HTML by choosing the Split tab. It will look very similar to the above.

  10. HTML Comments • The comment feature provides you with a way to document your HTML files and make notes to yourself • Basic form • <!-- + Comments + --> • <!-- This is a comment -->

  11. Text structure tags • Headings: <h1> … </h1> Boldest and largest <h2> …. </h2> <h3> … </h3> <h4> …. </h4> <h5> … </h5> <h6> …. </h6>  Lightest and smallest • Paragraph: <p> … </p>A blank line is inserted before the paragraph. • Line Break: <br> • Ordered lists: <ol> … </ol> • Unordered lists: <ul> … </ul>

  12. <HTML> Begins every HTML document <HEAD> Begins the head section <TITLE>DePaul University </TITLE> Title that appears on browser title bar </HEAD> Ends the head section <BODY> Begins the body section This is the first line.<BR> Text followed by line Break <P>Start a new paragraph.</P> Begins a new paragraph <H1>First Heading</H1> Level 1 heading (biggest) <H2>A second level heading</H2> Level 2 heading (little smaller) <HR> Inserts a horizontal rule (straight line) <B>This line is bold.</B><BR> Bold text <I>This line is italicized</I><BR> Italicized text <IMG SRC=“\images\banner.gif”> Insert an image here <A HREF=“http://www.cs.depaul.edu”> DePaul CS Page</A> Link to another web page </BODY> Close the body section </HTML> Ends every HTML document

  13. Example <hmtl> <head> <title> HCI 201: Multimedia and the Web </title> </head> <body> <h1>Important! (This is an H1)</h1> <p>Notice that we finally have some text in this paragraph.</p> <h3>Spacing test (this is an H3)</h3> <p>Here I am spacing things widely. It does not make a difference. I just left two lines blank, but I am still here! </p> <br> <p>Another paragraph!</p> </body> </html> Instructor: A. Burns

  14. JavaScript • JavaScript is THE scripting language of the Web. • JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more. • JavaScript is easy to learn! You will enjoy it! • http://www.w3schools.com/js/default.asp

More Related