Defining HTML

1. Defining HTML HTML:HTML is a subset of a larger markup language called SGML HTML stands for HyperTextMarkup Language. This markup language is used to create web documents. A web document is viewed in a web browser. HTML (HyperText Markup Language) is the language of the World Wide Web. It is a descriptive language that utilizes a limited number of predefined markup tags to describe how a web browser should display a web page.

2. Cont.. • Hyper is the opposite of linear. Old-fashioned computer programs were necessarily linear - that is, they had a specific order. But with a "hyper" language such as HTML, the user can go anywhere on the web page at any time. • Text is just what you're looking at now - English characters used to make up ordinary words. • Mark-up is what is done to the text to change its appearance. For instance, "marking up" your text with <b> before it and </b> after it will put that text in bold. • Language is just that. HTML is the language that computers read in order to understand web pages

3. Cont.. • Browser: A browser is a software application that allows you to view HTML documents, whether Web pages or HTML files, on your own computer. Two popular browsers are Internet Explorer and Netscape Navigator. • Website A Web site stores information that has been organized into individual hypermedia documents, Web pages, and holds it on a server for distribution across the Internet.

4. Hypermedia • A hypermedia document is a document with a format that can be displayed online, in a browser. In practice, hypermedia documents are often called HTML files, although they may contain many other types of files. • HTML standards are set and maintained by the World Wide Web Consortium

5. WWW(World Wide Web) The Web, or World Wide Web, is the area of the Internet that allow you to display text and graphics and play videos, and movies. With appropriate equipment, we can even receive or broadcast live audio and video. A set of html pages accessible using HTTP Hyper Text Transfer Protocal- HTTP is the protocol to exchange or transfer hypertext. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text. Hyperlink: A hyperlink, or link, usually appears as colored, underlined text or a graphic on a Web page. A link is a jumping-off point for moving from one subject to another.

6. Cont.. • HTML Web page authors require three basic tools: • Computer with graphics capabilities • Text editor • Browser software application Text editor: A text editor is a software application used to create and manipulate text, such as Notepad and WordPad.

7. HTML editors • Text based editors • WYSIWYG editors

8. Text-based (or code-based) editors • To start creating web pages, we do not need an expensive software package but you do need some knowledge of HTML. We can create web pages with a basic text editor like Windows Notepad. • In Windows, Notepad can be started from the Start Menu: • Select: Programs | Accessories | Notepad • Macromedia Homesiteis a popular text-based HTML editor.

9. WYSIWYG editors • Because WYSIWYG (pronounced wuzzywig or wizzywig) HTML editors do not require much HTML knowledge, they tend to be expensive. These editors allows you to directly work in the "design" or "preview" view instead of the code view. • There are several popular WYSIWYG editors available: Macromedia Dreamweaver Microsoft FrontPage Adobe GoLive

10. Text-based (or code-based) editors • Better control. Because text-based editors require knowledge of HTML, the developer has more control over what is written to produce a web page. In some cases, a software package (like FrontPage) may write proprietary code that may not be interpreted by all the brwosers. • Faster editing. we can quickly change your code unlike WYSIWYG editors. WYSIWYG editors require, for example, a lot of computer-resources to start-up or load/open a page. • More flexibility. we can edit your code directly at the desired location. This cannot be always done with WYSIWYG editors.

11. WYSIWYG editors • Support for other scripting languages. WYSIWYG editors provide advanced features to code in other programming/scripting languages such as JavaScript, XHTML, ASP/ASP.NET, PHP, and JSP. • Faster/simplified development. WYSIWYG editors allows you to develop pages quickly as the software writes the necessary code in response to the layout you design for your web page. • Better organization. Dreamweaver, for instance, allows you to define a site folder that contains all the files that make up the website. By defining a local site folder, you have many advantages including moving of files (without breaking links), searching of a particular term or tag in the entire site (without having the file open!), and FTP support to move only changed or new files to the server.

12. Creating an HTML document • An HTML document has two elements: • Document Content • Tags • Document content is the information on a web page that the user will see. That information could be text or graphics, for example. As you start creating your own web pages, try finding out first what information you want to display and how you want to present it. • Tags are the HTML codes that control how the document content will appear. The tags, in other words, will determine whether the text will be bold, black or blue, or of font type Time New Roman or Airal

13. Naming conventions • HTML files names are very important as they are used to locate or open the files. • Save your web page files with the .htm or .html file extension. • Some web servers are case-sensitive. • Filenames should consists only of letters and numbers. Avoid using spaces, punctuation, or special characters.

14. Basic structure of an HTML document • An HTML document has two main parts: • head. The head element contains title and meta data of a web document. • body. The body element contains the information that we want to display on a web page.

16. Understanding elements • To markup your web pages, we will need to learn the syntax (rules of a computing language) of HTML. the syntax only controls the presentation or structure of a web page. • The most fundamental piece of building block of HTML is the elements. • In HTML, an element refers to two different things: • element of structure of a document (for example, paragraph, web page title, etc.). • element in the sense of a tag (for example, <p>, <title>)

17. Cont.. • Tag • Start Tag • An End Tag • Empty Tags(no Content) • One-sided Tags. • Two-sided Tag.

18. Cont.. • Every element has a name such as head, title, p, i, and b. • A tag is the element name surrounded by the angled brackets. This refers to a start tag such as <p>, <title>, and <i>. • A start tag starts a particular HTML instruction. • An end tag is the same as a start tag except the end tag has a forward slash between the < and the element name. An end tag stops a particular HTML instruction. • Most elements have content, which is placed between the start and the end tags. Example, this is <b>bold</b>. • Some elements have no content. Such elements/tags are known as empty tags. • Some elements have no end tags. These are referred to as one-sided tags. • A tag that has an opening and closing tag is referred to as two-sidedtag.

19. Understanding attributes • In HTML, elements (or tags) have attributes or properties. As an HTML writer, attributes allow you to add extra instruction to your tags. • An attribute has two parts: attribute name and attribute value. . • Ex: align="right”

20. comments • In HTML, a comment begins with <!-- and ends with -->. • Example of a single line comment: <!--This is a small comment--> • Example of a multi-line comment: <!--This comment is long. It is displayed on more than one line. Adding multi-line comments in HTML is easy as adding a single line comment. Whether the comment is single line or multi-line, it starts with <-- and ends with -->-->.

21. Spacing and breaks • breaks between tags • spacing between tags • Spacing inside the brackets • Avoiding unnecessary space in HTML code

22. breaks between tags

23. spacing between tags

24. Avoiding unnecessary space in HTML code • There are two areas where the use of space should be avoided: • space between the tag name and brackets • space between the tag name and the text it affects

25. Space between the tag name and brackets

26. Space between the tag name and the text it affects

27. Creating a paragraph • In HTML, creating a paragraph is simple as entering text. To create a paragraph, move the cursor to the location where you want the paragraph in the HTML editor you are using. Next, type the <p> tag to begin the paragraph. • close the <p> tag with </p>. Closing the tag instructs the browser that the paragraph has ended. • Attributes: • Align=left, right, center,justify

28. Example.. <html> <head> <title>Paragraph example</title> </head> <body> <p align=“left”>ONE</p> <p align=“center”>TWO</p> <p align=“right”>THREE</p> <p align="justify">This paragraph uses the justify alignment. The paragraph is justified: the text continues to both margins.</p> </body> </html>

29. example • <html><title>How To Create Paragraph</title><body><p>To learn HTML and other web programming languages, come to ScriptingMaster.com regularly. The web site is updated daily with new content. The web site is succeeding because visitors like you keep coming back and find the site simple to use, easy to understand, and resourceful.</p></body></html>

30. Creating headings • Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest • HTML automatically adds an extra blank line before and after a heading.

32. Line breaks • To add a line break in a web page, you can use the <br> tag. Typing a <br> tag in your HTML code is similar to pressing the ENTER or RETURN key in a word processor. • The effect of <br> tag is that the browser stops printing text on that line and drops down to the next line on that page. • The <br> tag does not require a closing tag.

33. example

34. Preformat text • With the <pre> tag, the text renders in the browser exactly as you type it. The <pre> tag is short for preformat. So if you press the ENTER or RETURN key several times to create line breaks within a <pre> tag, you can expect to see all those line breaks in a browser. • The following shows the <pre> tag in use: • Syntax: <pre> -------- -------- </pre>

35. Cont..

36. Horizontal rules • To break up an HTML document into separate sections, you can insert a horizontal line (rule). A horizontal rule is inserted by the <hr> tag. The <hr> tag is one-sided, meaning it does not require a closing tag. • Inserting horizontal lines<hr>

37. Cont.. • Horizontal rule of size 12: • <hr size="12" /> • Horizontal rule of size 12 and width 20%: • <hr size="12" width="60%" /> • Horizontal rule of size 12, width 60%, and aligned left: • <hr size="12" width="60%" align="left" />

38. Output is…

39. Divisions (with the <div> tag) • To structure HTML documents into divisions or sections, the <div> tag is used. • The <div> tag specifies a logical block without predefined meaning or rendering infomration. Orginally, the tag was mostly used to align sections of content in a document with the align attribute. • example: <div align="right"><h4>Division heading</h4><p>Paragraph 1. This text is right-aligned. The div affects paragraph and other block elements.</p><p>Paragraph 2. This text is also right-aligned.</p></div>

40. Output… • Division heading Paragraph 1. This text is right-aligned. The div affects paragraph and other block elements. Paragraph 2. This text is also right-aligned.

41. HTML Links HTML uses the <a> anchor tag to create a link to another document or web page. • The Anchor Tag and the Href Attribute • The Target Attribute • Email Links • The Anchor Tag and the Name Attribute

42. The Anchor Tag and the Href Attribute • An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. • The syntax of creating an anchor: <a href="url">Text to be displayed</a> The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

44. The Target Attribute • With the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window: • <a href=“http://www.google.com” target="_blank">Visit </a>

46. Email Links • To create an email link, you will use mailto: plus your email address. • <a href="mailto:helpdesk@vce.edu">Email Help Desk</a> • To add a subject for the email message, we would add ?subject= after the email address. For example: • <a href="mailto:helpdesk@vce.edu?subject=Email Assistance">Email Help Desk</a>

47. The Anchor Tag and the Name Attribute • The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly to a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change the appearance of the text • syntax of a named anchor: • <a name="top">Text to be displayed</a>

48. HTML Images • The Image Tag and the Src Attribute • The Alt Attribute • Image Dimensions

49. The Image Tag and the Src Attribute • The <img> tag is empty, which means that it contains attributes only and it has no closing tag. • To display an image on a page, you need to use the src attribute. srcstands for "source". • The value of the src attribute is the URL of the image you want to display on your page. • The syntax of defining an image: <imgsrc="graphics/chef.gif">

50. The Alt Attribute • The alt attribute is used to define an alternate text for an image. • The value of the alt attribute is author-defined text: <imgsrc="graphics/chef.gif" alt="Smiling Happy abc"> • The alt attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.