HTML 5 Content. Page 1

Size: px

Start display at page:

Download "HTML 5 Content. Page 1"

Eileen Hawkins
5 years ago
Views:

1 Content Lesson 01. Introduction Lesson 02. HTML Elements Lesson 03. HTML BASIC Lesson 04. HTML HEADING Lesson 05. HTML Paragraphs Lesson 06. HTML Lines Lesson 07. HTML Tag Reference Lesson 08. HTML Formatting Tags Lesson 09. HTML Hyperlinks Lesson 10. HTML link syntax Lesson 11. Background color Lesson 12. Changing Font (Font name, Color & Size) Lesson 13. Text Alignment Lesson 14. HTML Images Lesson 15. HTML Forms Lesson 16. HTML forms The Input Element Lesson 17. HTML Password Field Lesson 18. HTML Radio Buttons Lesson 19. HTML Checkboxes Lesson 20. HTML Tables Lesson 21. HTML div Tag Lesson 22. HTML <span> Tag Lesson 23. HTML Layouts Lesson 24. HTML Layouts Using <div> Elements Lesson 25. HTML Layouts Using Table Page 1

2 Lesson 01: Introduction What is HTML? With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it. 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 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 <tagname>content</tagname> Page 2

3 Lesson 02. 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: HTML Element: <p>this is a paragraph. </p> 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 determine how the content of the HTML page is to be presented/displayed to the user: Page 3

4 Page 4

5 The <!DOCTYPE> Declaration The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used. Common Declarations HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Page 5

6 Lesson 03: HTML BASIC Writing HTML Using Notepad or TextEdit 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. Follow the 4 steps below to create your first web page with Notepad. Step 1: Start Notepad To start Notepad go to: Start All Programs Accessories Notepad Step 2: Edit Your HTML with Notepad Type your HTML code into your Notepad: Page 6

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.

7 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 Sahalsoftware. 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: Page 7

8 Lesson 04. HTML HEADING HTML Headings are defined with the <h1> to <h6> tags Example: <h1> This a heading </h1> <h2> This a heading </h2> <h3> This a heading </h3> <h4> This a heading </h4> <h5> This a heading </h5> <h6> This a heading </h6> Page 8

9 Lesson 05. HTML Paragraphs <h1> This is a Heading </h> <p> This is a first Pragraph </p> <p> This is a second Pragraph </p> <p> This is a third Pragraph </p> Lesson 06. HTML Lines The <hr> tag creates a horizontal line in an HTML page. The <hr> tag can be used to separate content: Try <h1> This is a Heading </h> <hr> <p> This is a first Pragraph </p> <hr> <p> This is a second Pragraph </p> <p> This is a third Pragraph </p> Note: some HTML tag only they have start tag. Page 9

10 Lesson 07. HTML Tag Reference <! Doctype html> declaration helps the browser to display a web page correctly. <html> Defines an HTML document <body> Defines the document s body <h1> to <h6> Defines HTML Heading <! -- > Defines a comment <p> Defines a paragraph <br> Inserts a single line break Page 10

11 Lesson 08. HTML Formatting Tags <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text HTML 5 Page 11

12 Lesson 09. HTML Hyperlinks The <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a web page, the arrow will turn into a little hand. The most important attribute of the <a> tag is the href attribute, which indicates the link s destination. Page 12

13 Lesson 10. HTML link syntax The HTML code for a link is simple. It looks like this: <a href= URL > link text </a> Try: <!Doctype HTML> <html> <body> <a href=" Halkan Riix si aad cilmi uga baratid Sahalsoftware</a> <br> <a href=" target="_blank">hoyga Aqoonta Computerka!</a> <br> <br> </body> </html> Page 13

14 Lesson 11. Background color The background-color property defines the background color for an element: Try: <!DOCTYPE html> <html> <body style="background-color:yellow;"> <h1 style="background-color:green;">this is a Heading </h1> </body> </html> Page 14

15 Lesson 12. Changing Font (Font name, Color & Size) Try: Try: <!DOCTYPE> <html> <body > <p style="font-family:arial; color:red; font-size:80px; "> Sheeko Kooban </p> <p> Sheeko Taxane ah </p> </body> </html> Page 15

16 Lesson 13. Text Alignment <!DOCTYPE> <html> <body > <h1 style="text-align:left;"> This is a Heading </h1> <h1 style="text-align:center;"> This is a Heading </h1> <h1 style="text-align:right;"> This is a Heading </h1> </body> </html> Lesson 14. HTML Images HTML images are defined with the <img> tag. <img src="sahalsoftware.jpg" width="104" height="142"> Try: <!Doctype html> <html> <body> <img src="e:\prac\web Design\HTML\Prac\MJ.jpg" width="104" Page 16

17 height="100" alt="sawirkan waa MJ" Title="Daawo Sawirkan" style="float: left; margin-right: 10px; margin-bottom: 5px; border: solid black 1px; padding: 2px"> <p> Casharkan waxaa lagugu barayaa sidii aad sawir computerkaaga yaala u soo gelin lahayd HTML kaaga. Iyada oo lagugu barayo weliba Attribute farabadan oo aan ka maarmin xiliga aad u baahan tahay in webkaaga sawirka sidaad rabtid aad u soo gelin kartid </p> <p style="clear: left"> Casharkan isku day inaad Attribute ka ku jiro aad si fiican uga faa iideysatid adiga oo marba dhinac ka tijaabinaya.</p> <p>tusaale ahaan TAG ga float wuxuu kaa caawinayaa dhinaca aad sawirka geynaysid, </p> Page 17

18 <p> margin ku wuxuu kaa caawinayaa sawirka iyo qoraalka inaad kala yar goysid</p> </body> </html> Note: The filename and the size of the image are provided as attributes. Lesson 15. HTML Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radiobuttons, submit buttons and more. A form can also contain select lists, texarea, fieldset, and label elements. The <form> tag is used to create an HTML form:. Input elements. </form> Page 18

19 Lesson 16. HTML forms The Input Element The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The most common input types are described below. <html> <body> <form action="div.html" method="get"> Page 19

20 First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"><br> <input type="submit" value="submit"> </form</body> </html> Lesson 17. HTML Password Field <input type = password > defines a password field: <form> Password: <input type= password name= pwd > </form> Page 20

21 Lesson 18. HTML Radio Buttons <input type= radio > defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female </form> Lesson 19. HTML Checkboxes <input type= checkbox > defines a checkbox button. Checkbox let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car </form> Lesson 20. HTML Tables Page 21

22 A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. also Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered. Try: <DOCTYPE html> <html> <body> <table> <tr> <th>header 1</th> <th>header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> Page 22

23 Lesson 21. HTML div Tag The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data. Lesson 22. HTML <span> Tag The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element can be used to set style attributes to parts of the text. Lesson 23. HTML Layouts HTML Layouts Page 23

24 Web page layout is very important to make your website look good. Design your webpage layout very carefully. Website Layouts Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages. Lesson 24. HTML Layouts Using <div> Elements The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example: Page 24

25 Try: <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#ffa500;"> <h1 style="margin-bottom:0;">main Title of Web Page</h1> </div> <div id="menu" style="backgroundcolor:#ffd700;height:200px;width:100px;float:left;"> <b>menu</b> <br> HTML<br> CSS<br> JavaScript </div> <div id="content" style="backgroundcolor:#eeeeee;height:200px;width:400px;float:left;"> Content goes here </div> <div id="footer" style="background-color:#ffa500;clear:both;text-align:center;"> Copyright Sahalsoftware.com</div> Page 25

26 </div> </body> </html> Lesson 25. HTML Layouts Using Table A simple way of creating layouts is by using the HTML <table> tag. Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages. The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute: <!DOCTYPE html> <html> <body> <table style="margin-left:180px; margin-top:50px; " width="1000" border="10"> <tr> <td colspan="2" style="background-color:#ffa500;"> <h1>main Title of Web Page</h1> </td> Page 26

27 </tr> <tr> <td style="background-color:#ffd700;width:100px;"> <b>menu</b> <br> HTML <br> CSS <br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#ffa500;text-align:center;"> Copyright Sahalsoftware.com </td> </tr> </table> </body> </html> HTML Layout - Useful Tips Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can Page 27

28 change the layout of all your pages by editing one file. To learn more about CSS, in the next month. Lesson 26. HTML Attributes - HTML links are defined with the <a> tag. The link address is specified in the href attribute: - <a href=" is a link</a>,. ; : Always Quote Attribute Values - Attribute values should always be enclosed in quotes. - Double style quotes are the most common, but single style quotes are also allowed. Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name= John "ShotGun" Nelson' HTML Tip: Use Lowercase Attributes Page 28

29 Attribute names and attribute values are case-insensitive. However, Sahalsoftware Web Development Team recommends lowercase attributes/attribute values in their HTML. Lesson 27. HTML Output - Useful Tips - You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. - With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. - The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space. Note: Browsers automatically add an empty line before and after a paragraph. Don't Forget the End Tag: Most browsers will display HTML correctly even if you forget the end tag: Example <p> this is a paragraph <p> this is another paragraph Page 29

30 The example above will work in most browsers, but don t use it. Forgetting the end tag can produce unexpected results or errors. Note: Future version of HTML will not allow you to skip end tags. Lesson 27. The HTML <meta> Element The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta> tags always go inside the <head> element. Refresh document every 30 seconds: <meta http-equiv="refresh" content="30"> Lesson 28. HTML head Elements Tag <head> <title> <link> <meta> <script> <style> Description Defines information about the document Defines the title of a document Defines the relationship between a document and an external resource Defines metadata about an HTML document Defines a client-side script Defines style information for a document Page 30

31 Lesson 29. Lists The most common HTML lists are ordered and unordered lists: HTML Lists An ordered An unordered list: list: 1. The first list item 2. The second list item 3. The third list item <ul> <li>coffee</li> <li>milk</li> </ul> How the HTML code above looks in a browser: HTML Ordered Lists Page 31

32 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>coffee</li> <li>milk</li> </ol> How the HTML code above looks in a browser: 1. Coffee 2. Milk HTML Ordered Lists Lesson 30. HTML Scripts JavaScripts make HTML pages more dynamic and interactive. The HTML <script> Tag The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. The script below writes Hello World! to the HTML output: Example <script> document.write("hello World!") </script> Page 32

33 Lesson 31. HTML Entities HTML Entities Some characters are reserved in HTML. HTML 5 It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code. A character entity looks like this: &entity_name; OR &#entity_number; To display a less than sign we must write: < or < Tip: The advantage of using an entity name, instead of a number, is that the name is easier to remember. However, the disadvantage is that browsers may not support all entity names (the support for entity numbers is very good). Non-breaking Space A common character entity used in HTML is the non-breaking space ( ). Browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them, before displaying the page. To add spaces to your text, you can use the character entity. HTML Useful Character Entities Note: Entity names are case sensitive! Page 33

34 Result Description Entity Name Entity Number non-breaking space < less than < < > greater than > > & ampersand & & cent pound yen euro section copyright registered trademark trademark Lesson 32. HTML5 Video - How It Works To show a video in HTML5, this is all you need: Example <!doctype html> <html> <body> <video width="600" height="400" controls> <source src="e:\study\sahalsoftware\it\quickbook\lesson 01. Overview Part1.mp4" type="video/mp4"> Page 34

35 <source src="e:\study\sahalsoftware\it\quickbook\lesson 01. Overview Part1\movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html> The control attribute adds video controls, like play, pause, and volume. It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads). You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element. The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format. Video Formats and Browser Support Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg: Browser MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox NO Update: Firefox 21 running on Windows 7, Windows 8, YES YES Page 35

36 Windows Vista, and Android now supports MP4 Safari YES NO NO Opera NO YES YES Try Another Video <!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="playpause()">play/pause</button> <button onclick="makebig()">big</button> <button onclick="makesmall()">small</button> <button onclick="makenormal()">normal</button> <br> <video id="video1" width="600"> <source src="e:\study\sahalsoftware\it\quickbook\lesson 01. Overview Part1.mp4" type="video/mp4"> <source src="e:\study\sahalsoftware\it\quickbook\lesson 01. Overview Part1.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script> var myvideo=document.getelementbyid("video1"); function playpause() { if (myvideo.paused) Page 36

37 myvideo.play(); else myvideo.pause(); } function makebig() { myvideo.width=560; } function makesmall() { myvideo.width=320; } function makenormal() { myvideo.width=600; } </script> <p>sahalsoftware ka baro casharo IT oo ku anfacaya <a href=" target="_blank">halkan RIIX</a>.</p> </body> </html> Lesson 33. HTML5 Audio HTML5 provides a standard for playing audio files. Audio on the Web Until now, there has not been a standard for playing audio files on a web page. Page 37

38 Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element. HTML5 Audio - How It Works To play an audio file in HTML5, this is all you need: Example <audio controls> <source src=" E:\Qiraa'o\[Quran] AbdulAzeez al-ahmad [128Kbps]\012.ogg" type="audio/ogg"> <source src=" E:\Qiraa'o\[Quran] AbdulAzeez al-ahmad [128Kbps]\012.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> The control attribute adds audio controls, like play, pause, and volume. You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element. The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format. Audio Formats and Browser Support Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg: Page 38

39 Browser MP3 Wav Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 YES YES Safari YES YES NO Opera NO YES YES END Page 39

40 Page 40

CSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax

CSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets