Download
1 / 16
160 likes | 256 Vues
eVenzia Technologies. Learning HTML, XHTML & CSS Chapter 1. Course Objective. Following the completion of this course, you will be able to write html code and do the following: Creating paragraphs and line breaks Create headings Work with lists Apply comments Apply formatting to text
E N D
eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1
Course Objective Following the completion of this course, you will be able to write html code and do the following: • Creating paragraphs and line breaks • Create headings • Work with lists • Apply comments • Apply formatting to text • Create tables • Create links to other web pages and e-mail addresses • Insert graphics • Create character entities eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
Basic Structure of a Web Page A web page designed in HTML has to follow a certain structure in order to be properly interpreted by the browser. First and most importantly, the entire source code and text of the web page has to be enclosed in the <HTML></HTML> tags. This tells the browser software that the document it is reading is written in Hyper Text Mark-up Language and should be interpreted as such. Without this tag, some browsers will not be able to read your web page and it will be displayed as plain text to the user, tags and all. Within the <HTML></HTML> tags are 2 sections: the Head Section and the Body Section. eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
Basic Structure of a Web Page • The Head section is defined by the <HEAD></HEAD> tags. Code within those tags define how your document will be interpreted by the browser, how your document will be displayed, and other information not seen by the user. • The Bodysection is where the guts of your web page is coded. Any text, graphics, sound, video and links to other pages go within the <BODY></BODY> tags. Each page in your web site will follow this same structure. eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
The Browser War • Internet Explorer • Chrome • Firefox Statistics – 2010 IE Chrome FF • August 30.7% 17% 45.8% • July 30.4% 16.7% 46.4% • June 31% 15.9.3% 46.6% eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
HTML <!DOCTYPE> Declaration • The doctype declaration should be the very first thing in an HTML document, before the <html> tag. • The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. • The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly. eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
Differences Between XHTML & HTML The Most Important Differences: • XHTML elements must be properly nested <b><i>This text is bold and italic</b></i> <b><i>This text is bold and italic</i></b> • XHTML elements must always be closed <p>This is a paragraph <p>This is a paragraph</p> eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
Differences Between XHTML & HTML The Most Important Differences: • XHTML elements must be in lowercase <BODY> <P>This is a paragraph</P></BODY> <body> <p>This is a paragraph</p> </body> eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
What is HTML? • HTML is a language for describing web pages • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
What is an HTML File? • An HTML file is a text file with HTML tags • An HTML file name must end with .htm or .html • An HTML file can be created using a simple text editor • An HTML file is often called an HTML document or a Web Page eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
An HTML Document • When a browser displays a web page, it will not display the markup tags. • The text between the <body> and </body> tags is displayed in the web browser. • The text between the <p> and </p> tags is displayed as paragraphs. • The text between the <b> and </b> tags is displayed in a bold font. eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
What to Include in Every Web Site • Home Page • Sitemap • Contact Page • FAQ • Help Page • About Us eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
HTM or HTML Extension? • When you save an HTML file, you can use either the .htm or the .html extension. We use .htm in our examples. It is a habit from the past, when the software only allowed three letters in file extensions. • With new software it is perfectly safe to use .html. eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
Creating a New Web Page Download Emeditor • Run The Program Creating your first file • File -> New -> HTML Saving your file File -> Save -> file name (“index”) -> Save eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
HTML Document Code Structure <html> <body> Your body contents here </body> </html> eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
Keywords & Description <html> <head> <title>Page title is added here</title> <meta name='description' content=‘Keywords'> <meta name='keywords' content=‘Description'> </head> <body> Your body contents here </body> </html> eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
