Web design - HTML (Hypertext Markup Language) introduction
Download as PPTX, PDF0 likes1,124 views
This document provides an introduction to HTML (Hypertext Markup Language) and web page design fundamentals. It discusses what HTML is, the basic structure of an HTML document including the DOCTYPE, HTML, head and body tags. It describes HTML elements, attributes, entities and how to nest elements. The document outlines how to create an HTML page from scratch, including planning the design, combining HTML and text, saving the file, and viewing it in a browser. It also discusses adding metadata like the title, keywords and description to the head section and posting the finished page online.
Web design - HTML (Hypertext Markup Language) introduction
- 1. Fundamentals of Web designing Ministry of Higher Education Bamyan University Computer Science Department 1 Presented by : Mustafa Kamel Mohammadi Email : [email protected] HTML (Hypertext Markup Language) introduction
- 2. learning objective In this chapter you will learn What is HTML? Structure of n HTML document 2
- 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. 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. So what is HTML ? HTML is a hypertext markup language! 5
- 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. 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. 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. 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. Nesting elements • Many page structures combine nested elements <ul> <li>Barbera</li> <li>Brunello</li> </ul> 10
- 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. 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: • < = less than character • > = greater than • © = copyright sign 12
- 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. 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. 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. 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. 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. 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. 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. 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. 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
- 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