1 / 31

HTML Basics

HTML Basics. Ali Alshowaish. What is HTML?. HTML stands for H yper T ext M arkup L anguage Specifically created to make World Wide Web pages Web authoring software language Created by Tim Berners-Lee in late 1980s from SGML . What is HTML?.

ethan
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 Ali Alshowaish

  2. What is HTML? • HTML stands for Hyper Text Markup Language • Specifically created to make World Wide Web pages • Web authoring software language • Created by Tim Berners-Lee in late 1980s from SGML

  3. What is HTML? • The markup tags tell the web browser how to display the page • For instance put text in a bold font. • HTML is not a programming language, it is a markup language • HTML Version 4.01 is current.

  4. Why do we need HTML? • Simple text files are not enough? • Word-processing files are not appropriate: • Proprietary. • Not Standard. • Need to be downloaded first. • No hyperlinks. • Even word-processing Software use Markup Languages

  5. What is a HTML File? • An HTML file is a text file (ASCII) containing small markup tags • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor: Notepad or WordPad (PC) or SimpleText (Mac) • WYSIWYG (FrontPage, Dreamweaver, … etc.

  6. HTML Syntax • When you learn a language, you need to learn rules, called syntax • Elements to define the structure of the document • Examples of elements are: head, body, p, ul

  7. HTML Syntax • When you insert these elements in your HTML file you surround them with < (less than) and > (greater than) symbols. • Examples: <head>, <body>, <p> and <ul>. • These are no longer elements; they are now called tags. • Tags are Predefined.

  8. Open Notepad and Type in the following text: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

  9. Example Explained • The first tag in your HTML document is <html>. • This tag tells your browser that this is the start of an HTML document. • The last tag in your document is </html>. • This tag tells your browser that this is the end of the HTML document.

  10. Example Explained • The text between the <head> tag and the </head> tag is header information. • Header information is not displayed in the browser window. • The text between the <title> tags is the title of your document.

  11. Example Explained • The title is displayed in your browser's caption. • The text between the <body> tags is the text that will be displayed in your browser. • The text between the <b> and </b> tags will be displayed in a bold font.

  12. Reviewing the File: • Save the file as "mypage.html". • Don’t close Notepad.  • Open the file in your browser (e.g., Internet Explorer).

  13. HTML Tags • HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the two characters < and > • The surrounding characters are called angle brackets • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • HTML tags must be closed. • The text between the start and end tags is the element content • HTML tags are not case sensitive, <b> means the same as <B>

  14. This is an HTML element: <b>This text is bold</b> • The HTML element starts with a start tag: <b>The content of the HTML element is: This text is bold. The HTML element ends with an end tag: </b> • The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

  15. Comments in HTML <!-- This is a comment --> • The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. • Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

  16. Basic HTML Tags

  17. Attributes • HTML elements contain attributes to define functionality of the tag: <tagname attribute=“value” /> • Attributes usually come in name/value pairs. • Examples: • <IMG src=“images/seeds.jpg” height=“100” width=“100”> • <a href=“http://www.example.com”> • <span style=“background-color:blue;”>

  18. <a href=“http://www.example.com”> <a href="http://www.example.com">This is a link</a> Adding link:

  19. Adding images with the IMG element Use the IMG element to add an image to your page simply. The IMG element includes everything you need in the start tag and does not have end tags. <IMG src=“images/seeds.jpg” alt=“picture of seeds” height=“100” width=“100”> src: URL of image Alt: short description Height, width: height and width of image

  20. Character:

  21. Lists:

  22. Tables:

  23. Form:

  24. Div and Span tags are both used as content wrappers. The difference between the two is DIV is a block element while SPAN is an inline element. What that means is the DIV tag takes up the entire width of the screen whereas SPAN conforms to the width of whatever element it contains. DIV and SPAN:

  25. Any Question? Thank you all

More Related