HTML5 Basics

Transcript

1. WEB DESIGN @2018 MD IBRAHIM www.m-coreintl.com 1 M.D IBRAHIM
2. MOTIVATION  With HTML you can create your own Web site.  This tutorial teaches you the basics of HTML.  HTML is easy to learn - You will enjoy it. MD IBRAHIM www.m-coreintl.com 2
3. CONTENTS  WHAT IS HTML?  WEB BROWSERS  HTML TAGS  HTML EDITORS  HTML VERSIONS  HTML SKELETON  The <html> element  The <head> element  The <body> element  HEADINGS AND PARAGRAPHS  Html Tips MD IBRAHIM www.m-coreintl.com 3
4. What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is a markup language  A markup language is a set of markup tags  The tags describe document content  HTML documents contain HTML tags and plain text  HTML documents are also called web pages MD IBRAHIM www.m-coreintl.com 4
5. HTML Tags  HTML markup tags are usually called HTML tags  HTML tags are keywords (tag names) surrounded by angle brackets like <html>  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  The end tag is written like the start tag, with a forward slash before the tag name  Start and end tags are also called opening tags and closing tags  EXAMPLE:  <tagname>content</tagname> MD IBRAHIM www.m-coreintl.com 5
6. HTML Elements  "HTML tags" and "HTML elements" are often used to describe the same thing.  But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:  EXAMPLE:  <p>This is a paragraph.</p> MD IBRAHIM www.m-coreintl.com 6
7. HTML VERSIONS since the early days of the web, there have been many versions of html: Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013 MD IBRAHIM www.m-coreintl.com 7
8. HTML EDITORS  HTML can be edited by using a professional HTML editor like:  Adobe Dreamweaver  Microsoft Expression Web  CoffeeCup HTML Editor  However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. MD IBRAHIM www.m-coreintl.com 8
9. TO OPEN/LUNCH Notepad  Step 1:  To start Notepad go to:  Start All Programs Accessories Notepad MD IBRAHIM www.m-coreintl.com 9
10. CONT  Step 2: Edit Your HTML with Notepad  Type your HTML code into your Notepad: MD IBRAHIM www.m-coreintl.com 10
11. Step 3: Save Your HTML  Select Save as.. in Notepad's file menu.  When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.  Save the file in a folder that is easy to remember, like w3schools. MD IBRAHIM www.m-coreintl.com 11
12. Step 4: Run the HTML in Your Browser  Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.  The result should look much like this: MD IBRAHIM www.m-coreintl.com 12
13. Web Browsers  The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:  MD IBRAHIM www.m-coreintl.com 13
14. SKELETON <!DOCTYPE html> <html> <head> <title> </title> </head> <body> </body> </html>  NOTE: PLS DON’T CRAM DIS !!! MD IBRAHIM www.m-coreintl.com 14
15. CONT  The <!DOCTYPE html> declaration is the doctype for HTML5  The DOCTYPE declaration defines the document type  The text between <html> and </html> describes the web page  The text between <body> and </body> is the visible page content MD IBRAHIM www.m-coreintl.com 15
16. THE HTML ELEMENT <html> </html> The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag </html>. MD IBRAHIM www.m-coreintl.com 16
17. THE HEAD ELEMENT The <head> element has a start or open tag <head> and an end or close tag </head>.Its also contains the <title>, <style>, <meta>, <link> and <script> tags. The <title> tag is used to define a title for a web page. The <link> tag defines the relationship between a document and an external resource. The <style> tag is used to define style information for an HTML document. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be use for search engines and web crawlers. The <script> tag is used to define a client-side script, such as a JavaScript. MD IBRAHIM www.m-coreintl.com 17
18. HEAD TAGS AND DESCRIPTION Tag Description <head> Defines information about the document <title> Defines the title of a document <link> Defines the relationship between a document and an external resource <meta> Defines metadata about an HTML document <script> Defines a client-side script <style> Defines style information for a document MD IBRAHIM www.m-coreintl.com 18
19. THE BODY ELEMENT <body> </body> The <body> element defines the contents of a webpage. Its display what the user/client sees. The element has a start tag <body> and an end tag </body>. MD IBRAHIM www.m-coreintl.com 19
20. The Headings and Paragraphs  The <h1> and </h1> is displayed as a heading  EXAMPLE: <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>  The <p> and </p> is displayed as a paragraph <p>This is a paragraph.</p> <p>This is another paragraph.</p> MD IBRAHIM www.m-coreintl.com 20
21. Empty HTML Elements  HTML elements with no content are called empty elements.  <br> is an empty element without a closing tag (the <br> tag defines a line break).  <hr>  E.t.c MD IBRAHIM www.m-coreintl.com 21
22. CONT.  HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.  W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML. MD IBRAHIM www.m-coreintl.com 22
23. REFERENCEs  David Sawyer McFarland (2009); CSS: The Missing Manual, O’Reilly Media, Inc., (2nd Edition), Gravenstein Highway North, Sebastopol, CA 95472.  Duckett, J., (2004);Beginning Web Programming with HTML, XHTML, and CSS, University of Chicago Press (2nd Edition), Chicago.  Richard York(2009); Beginning CSS: Cascading Style Sheets for Web Design, Wiley Publishing, Inc.(1st Edition), Indianapolis, Indiana.  http://www.w3schools.com MD IBRAHIM www.m-coreintl.com 23
24. THE END NEXT >>> LINKS, IMAGES AND LOTS MORE… MD IBRAHIM www.m-coreintl.com 24
25. CONTACT 0813-591-5350 MD IBRAHIM www.m-coreintl.com 25 @The_Dattijo www.facebook.com/ibrahim.dattijo.9 www.idattijo.blogspot.com ibrahimdattijo@yahoo.com idattijo@gmail.com google.com/+ibrahimdattijo www.m-coreintl.com