Introduction to HTML

1. Introduction to HTML 2013/02/20 1

2. Agenda 1. Brief history of HTML 2. What is HTML? 3. How they use tags? 4. Single tags 5. Getting started 6. What is a web browser 7. How a web browser works 8. How does basic HTML looks like 9. Recommended text editors 10. Creating the HTML layout 11. What are the basic things we can include in a HTML page 12. Manipulating Text 13. Creating tables 14. Creating lists 15. Inserting images 16. Hyper links 17. How Beautiful HTML code looks like? 18. Advantages of HTML 2013/02/20 2

3. Brief history of HTML • Tim berners-Lee, a British physicist working at Switzerland at the time of 1989 is the inventor of HTML.And is often credited as the inventor of www. • HTML is based on SGML (Standard Generalized Markup Language) which exists since 1940s, but with out the ability to link. • He proposed it as way of enabling researches from remote sites of the world to organize and pool together information. • He suggested that you could link text in the files themselves, through an agreed upon markup language. 2013/02/20 3

4. What is HTML? • Hyper Text Markup Language • Hyper : you can go anywhere and everywhere on a browser. Document with links. • Text : you are working primarily using text. • Markup : The code necessary for making the HTML readable by a browser. Markup refers to the sequence of characters or other symbols that you insert at certain places in a text or word processing file to indicate how the file should look when it is printed or displayed or to describe the document's logical structure. The markup indicators are often called "tags." • Language : Syntax of a programming or scripting language 2013/02/20 4

5. What is HTML? • HTML is a markup/scripting language and not a programming language. • In today's world, it is commonly used along with JavaScript and Cascading Style Sheets (CSS) to give web pages the look and feel we desire. • Just as SQL is a data query language, HTML is simply a text formatting language. • Through HTML, the look and appearance of images, links, headings, text, page layout and just about every element of a web page can be formatted. • Markup language contains markup Tags that describes how the text is to be formatted. • The website you view on the internet are actually text files that consists of HTML tags. 2013/02/20 5

6. Difference Between Markup and programming language Markup Language – A language designed to format text. It does the transition of raw text into structured documents by using markup tags into the raw text. The text given inside the tags are structured by the browsers depending on the markup. Programming languages are compiled. But in markup language is just interpreted by the browser. Programming Language - It is an set of instructions to the computer to perform. It is coded, compiled and interpreted before it gets executed. Some languages require compiler and some others require interpreter and the rest requires both. The source code converted into machine readable form and then executed. The computer hardware is responsible to execute an programming language and browser is needed for an markup language. Few Programming Languages are JAVA,C++,COBOL,C++ and VB 2013/02/20 6

7. How they use TAGs? • Tags are instructions that tell your web browser what to show on the page. • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • All tags begins with less than sign “<” and ends with the greater than sign “>”. So anything inside < > is a tag. • Each tag must accomplished with a closing tag, which is exactly the same as except it includes a slash after the less than sign </>. 2013/02/20 7

8. Single Tags 2013/02/20 8

9. Getting Started What you need • A computer • A web browser • A word processor like windows notepad/WordPad or Mac textedit or other editing programs. And you are ready to make websites  2013/02/20 9

10. What is a web browser? • Web browser is a computer application that does two things; – It goes to a web server on the internet and request a page, so it can pull the page through the network and into your machine. – It interrupts the HTML elements and tags within the page in order to display it on the screen as the page’s creator intended. 2013/02/20 10

11. How a web browser works? 2013/02/20 11

12. What does basic HTML look like? <html> This is a TAG <head> <title> Your Title</title> </head> <body> This is a ELEMENT This is where your content goes. </body> </html> 2013/02/20 12

13. Elements • Elements are made up of two tags, with an open tag and close tag. Between these tags is the element content. <TITLE> This is the Home page</TITLE> Start tag End tag 2013/02/20 13

14. • Most Elements will contain multiple elements. An element that contains another element looks like this. <head> <title> The document title <title> </head> 2013/02/20 14

15. Recommended text editors (Windows) 1. Notepad ++ 2. Caditor 3. Jedit 4. conTEXT 5. Komodo EDIT 6. sciTE 2013/02/20 15

16. Recommended text editors (MAC) • Bluefish Editor • Text Wrangler • Smultron • Komodo Edit • jEdit 2013/02/20 16

17. Creating the HTML layout <html> <head> All the information relevant to <title> Home page</title> the web page , title , java scripts are located inside the HEAD element. </head> <body> The website which is viewing by people. </body> </html> 2013/02/20 17

18. Open Notepad 2013/02/20 18

19. How to save the HTML page • Web page always think the home page is default/index. • When you save your HTML page every time main page has to name as index or default. • When you save an HTML file, you can use either the .htm or the .html file extension. It will shows as below index.html , index.htm / default.html , default.htm 2013/02/20 19

20. Guidelines • If you are using windows web server it does not matter Home page is index.html ,INDEX.html But if you are using Linux web server every page has to name in simple letters. • Windows is not Case sensitive. • Linux is Case sensitive. 2013/02/20 20

21. What are the basic things we can include in a HTML page 1. Text 2. Tables 3. List 4. Images 5. Hyper links 2013/02/20 21

22. Manipulating Text • Heading commands is used to create header text. <h1></h1> • There is a range of header tags such as , <h1> to <h6> Is the Highest Is the Lowest • H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on. • Heading commands create nice , bold text and are quite easy to use. It is a simple command 2013/02/20 22

23. • To align text we use <p> </p> elements. • Use the <br> tag if you want a line break (a new line) without starting a new paragraph: Tips – Web browser will not show the spaces which we use in the HTML code, so we need to use separate tags to align text in the HTML page. Ex:- <br> <span> – Never use Capital letters in the HTML page. 2013/02/20 23

24. Sample HTML code <html> <head> <title> This is my title</title> </head> <body> Header <h1> Hello World!!</h1> <p> I am a very basic page.</p> Paragraph </body> </html> 2013/02/20 24

25. Lists • We have two common types of lists 1. Ordered List - An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. Ex: 1. one 2. two 3. three • Un ordered list – An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). • One • Two • three 2013/02/20 25

26. Ordered list <html> <head> <title> This is my title</title> </head> <body> <ol> List element <li>one </li> <li>two </li> <li>three</li> </ol> </body> </html> 2013/02/20 26

27. Un ordered list <html> <head> <title> This is my title</title> </head> <body> <ul> <li>one </li> List element <li>two </li> <li>three</li> </ul> </body> </html> 2013/02/20 27

28. Creating Table • Ex : 1 2 3 4 5 6 7 8 9 2013/02/20 28

29. <html> <head> <title> This is my title</title> </head> <body> <table border=“1”> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> 2013/02/20 29

30. Inserting Images • Save the image inside the same folder where index/default.html is located. <img src =“ smile.jpg”/> 2013/02/20 30

31. <html> <head> <title> This is my title</title> </head> <body> <img src =“smile.jpg”/> </table> </body> </html> 2013/02/20 31

32. Hyper links • The HTML <a> tag defines a hyperlink. • 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> element is the href attribute, which indicates the link’s destination. • The HTML code for a link is simple. -<a href="url">Link text</a> • Open link in a new window or tab <a href=“index.html” target = “_blank” >HOME </a> 2013/02/20 32

33. How Beautiful HTML code looks like? • Proper ending tags • Code is tabbed in to sections. • Hierarchy of header tags • No styling leave it to CSS!!! 2013/02/20 33

34. 2013/02/20 34

35. Advantages of HTML 1. HTML is easy to use and understand. 2. All browsers support HTML. 3. Syntax are very similar. 4. HTML is free. 5. Most development tools support HTML. 6. It is user friendly with most search engines. 2013/02/20 35

36. Thank you  2013/02/20 36

Introduction to HTML

Introduction to HTML

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Introduction to HTML

Similar a Introduction to HTML(20)

Último

Último(20)

Introduction to HTML