Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web design - HTML (Hypertext Markup Language) introduction

634 views

Published on

In this chapter you will learn
What is HTML?
Structure of n HTML document

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web design - HTML (Hypertext Markup Language) introduction

  1. 1. Fundamentals of Web designing Ministry of Higher Education Bamyan University Computer Science Department 1 Presented by : Mustafa Kamel Mohammadi Email : bamian.cs@gmail.com HTML (Hypertext Markup Language) introduction
  2. 2. learning objective  In this chapter you will learn  What is HTML?  Structure of n HTML document 2
  3. 3. What is hypertext? • Web pages can contain many kinds of content, such as text, graphics, forms, audio and video files, and interactive games. • HTML is the cement that holds a Web page together. • HTML files that produce Web pages are just text documents. • But Web pages aren’t merely text documents. They’re made with a special kind of text called HTML. • HTML is a collection of instructions that specifies how your page should look and behave. • Special instructions in HTML permit text to point (link) to something else. Such pointers are called hyperlinks. • Hyperlinks are the glue that holds the World Wide Web together. In your Web browser 3
  4. 4. Markup? • Web browsers were created to read HTML instructions (known as markup) and display the resulting Web page. • Markup lives in a text file (with your content) to give orders to a browser. 4
  5. 5. So what is HTML ? HTML is a hypertext markup language! 5
  6. 6. Syntax and rules • HTML markups are made of three types of components • Elements • Attributes • Entities • Every markup may be made of a combination of these components 6
  7. 7. HTML Element • Is the building block of HTML pages • Elements are made of • Tags • Content in the tags • Two types of elements are identified • Element that have content and are made of a pair of tags • Element that inserts an object and made of a single tag 7
  8. 8. Pair tag elements • Elements that describe content use a tag pair to mark the beginning and the end of the element, Start and end tag. • <tag>...</tag> • Contents such as paragraphs, headings, tables and lists always uses a tag pair • The start tag (<tag>) tells the browser, “The element begins here.” • The end tag (</tag>) tells the browser, “The element ends here.” • The actual content is what occurs between the start tag and end tag. • <p> this is a paragraph </p> 8
  9. 9. Single tags • Elements that insert something into the page are called empty elements • <tag /> • Images and line breaks insert something into the HTML file, so they use one tag. <img src=”red_grapes.jpg” width=”75” height=”100” alt=”Red Grapes” align=”middle” hspace=”5” /> 9
  10. 10. Nesting elements • Many page structures combine nested elements <ul> <li>Barbera</li> <li>Brunello</li> </ul> 10
  11. 11. Attributes • Attributes allow variety in how an element describes content or works • You include attributes within the start tag of the element you want them with, after the element name but before the ending sign, like this: <tag attribute=”value” attribute=”value”> • Attribute values must be enclosed in quotation marks • Every element has its own set of applicable attributes • Some attributes are globally applied on all elements 11
  12. 12. Entities • Entities are special characters that you can display on your Web page. • It include some special characters, such as trademark symbols, fractions, and accented characters. • The ampersand character (&) instructs the browser that the following stream are character entity. • Ex: • &lt = less than character • &gt = greater than • &copy = copyright sign 12
  13. 13. Before getting started! • Creating HTML documents differs from creating word-processor documents in an application like Microsoft Word because you use two applications: • You create the Web pages in your text or HTML editor. • You view the results in your Web browser. 13
  14. 14. Creating a Page from Scratch • Using HTML to create a Web page from scratch involves four straightforward steps: 1. Plan your page design. 2. Combine HTML and text in a text editor to make that design a reality. 3. Save your page. a. Save your page as .html or .htm file extensions 4. View your page in a Web browser. 14
  15. 15. HTML page structure • every properly constructed HTML page needs the same basic document structure that includes • A statement that identifies the type of HTML document called DOCTYPE • A document header • A document body 15
  16. 16. HTML DOCTYPE • At the top of your HTML document should be the Document Type Declaration or DOCTYPE declaration. • Relevant HTML DOCTYPE • HTML 4.01 • XHTML 1.0 • HTML 5 • HTML 5 is the newest version of HTML that almost all browsers support this • <!DOCTYPE html> is the syntax of HTML 5 doctype declaration 16
  17. 17. Html tag • After you specify which version of (X)HTML the document follows, add an <html> element to hold all the other (X)HTML elements in your page. <!DOCTYPE html> <html> // all other elements of html goes here </html> 17
  18. 18. Header of web page • Inserted in HTML tag. • Is one of the two main components of HTML document • Provides basic info about page • Adding title • Adding meta data • Keywords • Author info • Description • Adding style sheet 18
  19. 19. Cont. • Adding title • Adding description <!DOCTYPE html> <html <head> <title>Bamyan IT Consulting Service</title> <meta name=”keywords” content=”IT consulting, MCSE, networking” /> <meta name=”description” content=”An overview of Bamyan Service company services” /> </head> </html> • Content of meta tag do not affect page appearance 19
  20. 20. Body tag • The <body> element holds the content of your document. • Every thing that you want to show come in body tag <HTML> <head> </head> <body> </body> </HTML> 20
  21. 21. Posting Your Page Online 1. Find a Web hosting provider to hold your Web pages. 2. Use an FTP client or a Web browser to make a connection to your Web server. 3. Copy the HTML file from your hard drive to the Web server. 4. Use your Web browser to view the file via the Internet. 21
  22. 22. 22
  23. 23. References • “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister • “HTML 5 designing rich internet applications” by Mathew Dawid • “HTML in ten simple steps” by Robert G. fuller 23

×