1. HTML BasicstMyn1 HTML Basics Different types of HTML Editors. The bulk of the software packages can be broken up into two main categories: text-based HTML editors (also called code-based HTML editors) and WYSIWYG (What You See Is What You Get) editors. Text-based editors require you to know some HTML to use them. They can be customized to help speed your coding process, and often have sophisticated checks and balances in place to check for errors in coding.

2. HTML BasicstMyn2 WYSIWYG editors don’t require HTML knowledge. Instead of looking at the HTML of your pages, you are shown a “preview” of how the page will look in a browser. You can simply drag-and-drop pieces of your layout as you see fit. In this module we use Crimson Editor (text-based).

3. HTML BasicstMyn3 HTML files are simply text files with two additional features. 1. HTML files have an.html file extension. A file extension is an abbreviation that associates the file with the appropriate program or tool needed to access. 2. HTML files have tags. Tags are commands or code used to tell the computer how to display the page content.

4. HTML BasicstMyn4 You can view HTML files located on your PC within your own Web browser. It isn’t necessary for your files to be stored on a Web server until you are ready to make them visible on the Internet. When you want to preview a page, open your Web browser and choose File -> Open…, and then browse your hard disk until you locate the HTML file you want to open.

5. HTML BasicstMyn5 The steps to edit and preview HTML files are 1. Open/return to your HTML file in a text editor. 2. Edit your HTML file in a text editor. 3. Save your HTML file in a text editor. 4. Open/return to your HTML file in a Web browser. 5. Click the REFRESH button in your Web browser to update the HTML page according to any changes you just made to it. By keeping your HTML file open in both a text editor and a browser, you can easily make and preview changes.

6. HTML BasicstMyn6 In the classroom PCs the configuration has been implemented so that each PC does have a Web server software (Apache HTTP Server) of it’s own. All the HTML files must be saved to the directory C:\Program Files\Apache Group\Apache2\htdocs\YourPersonalFoulderName This means that http://localhost will display the home page of the local web site.

7. HTML BasicstMyn7 An HTML entity or tag is a command used to tell the computer how to display content on a page. This command is similar to what happens behind the scenes when when you highlight some text in a word processor and click the BOLD button to make the text boldface. With HTML, you type a tag before and after the text you want to make bold. Tags are placed within brackets (<>) or less-than and greater-than symbols: Reminder: There will be no violin practice today.

8. HTML BasicstMyn8 In HTML, there are usually both opening and closing tags. For example, if you use as an opening tag to signify where to start making text bold, you have to use a closing tag to signify where to stop making text bold. To do so, you use the same tag with a forward slash placed before it:. An HTML element is everything from the start tag (opening tag) to the end tag (closing tag). Following are some of the most basic HTML tags:

9. HTML BasicstMyn9 Opening TagClosing TagDescription Tells the browser which set of standards your page adheres to. Frames the identification information for the page, such as the title. Gives the name of the page that will appear at the top of the browser window and be listed in search engines. Frames the content of the page to be displayed in the browser window. Basic HTML Page Tags:

10. HTML BasicstMyn10 The element content is everything between the start and the end tag. This is something big The element content above is: This is something Some HTML elements have empty content. Empty elements are closed in the start tag. is an empty element without a closing tag (it defines a line break).

11. HTML BasicstMyn11 Many tags have additional aspects that you can customize. These options are called attributes and are placed after the tag, but before the final bracket. In the example above, the tag is img, and the attributes are alt and src. Each attribute has a value, which comes after an equal sign (=) and is placed within quotation marks. Most HTML elements can have attributes. Some useful attributes are as follows:

12. HTML BasicstMyn12 AttributeDescription class Specifies a classname for an element id Specifies a unique id for an element title Specifies extra information about an element lang Specifies a language code for the content in an element Some useful attributes:

13. HTML BasicstMyn13 The term nesting refers to the process of containing one HTML tag inside another: This text is bold and italic You should always be able to draw semicircles that connect the opening and closing versions of each tag. If any of your semicircles intersect, your tags are not nested properly.

14. HTML BasicstMyn14 Sometimes you might not want visitors to your Web site to see comments or notes you need to add to your Web pages: A space should appear after the opening comment and before the closing comment.

15. HTML BasicstMyn15 Paragraphs are defined with the tag. Browsers automatically adds an empty line before and after paragraphs. The next examples show some basic usages of the most common tags.

16. HTML BasicstMyn16 The tag defines the title of the document. The title element is required in all HTML documents. The title element: –defines a title in the browser toolbar –provides a title for the page when it is added to favorites –displays a title for the page in search-engine results

17. HTML BasicstMyn17

18. HTML BasicstMyn18

19. HTML BasicstMyn19 One of the earliest means of formatting text was the heading tag. The to tags are used to define HTML headings. defines the largest heading and defines the smallest heading.

20. HTML BasicstMyn20 The tag defines a division or a section in an HTML document. The tag is often used to group block-elements to format them with styles. Browsers usually place a line break before and after the div element. Written somewhere 29 of December, 1957.

21. HTML BasicstMyn21 The phrase tags are tags that give structural information to fragments of text. The phrase tags include the and : Renders as emphasized text Renders as strong emphasized text

22. HTML BasicstMyn22

23. HTML BasicstMyn23

24. HTML BasicstMyn24 There are three types of lists, two of them are covered here. An ordered list is one in which each item is preceded by a number or letter. For example: My favorite fruits are 1. raspberries 2. strawberries 3. apples The HTML code would look like:

25. HTML BasicstMyn25 My favorite fruits are raspberries strawberries apples means ordered list and means list item. The default type of ordered list uses Arabic numbers.

26. HTML BasicstMyn26 The second type of list is similar to the first, except unordered lists don’t use numbers or letters. As the name suggests, unordered lists don’t rely on order for importance. These lists use bullets to precede each list item. For example: Red Green Blue The HTML code would look like:

27. HTML BasicstMyn27 Red Green Blue

28. HTML BasicstMyn28

29. HTML BasicstMyn29

30. HTML BasicstMyn30 HTML enables us to link to other Web pages, as well as graphics, multimedia, e-mail addresses, newsgroups, and downloadable files. Anything you can access through your browser can be linked to from within an HTML document. In fact, one of the easiest ways to identify the URL of a page you want to link to is to copy it from the address toolbar in your Web browser. You can then paste it directly into your HTML file. You can add links to other Web pages, whether they are part of your Web site or someone else’s:

31. HTML BasicstMyn31 The capital of Sweden is <a href= "http://www.stockholm.se/">Stockholm. This is the opening tag The href attribute gives the location of the page or site we are linking to In this case, the value of the href attribute is the full URL of the Web page. This is the closing tag This is the text that will be linked in the Web page.

32. HTML BasicstMyn32 The a tag itself doesn’t serve much purpose without its attributes. The most common attribute is href, which is short for hypertext reference: it tells the browser where to find the information to which you are linking. The text included in between the opening and closing a tag is what the person viewing your Web page can click. In most cases, this text is highlighted as a different color from the surrounding text and is underlined.

33. HTML BasicstMyn33

34. HTML BasicstMyn34

35. HTML BasicstMyn35

36. HTML BasicstMyn36 Visited link does have a different color.

37. HTML BasicstMyn37 In deciding what to use as the value of your href attribute, consider what type of link you want to use. Two basic types of links exist: absolute and relative. Absolute links are those that include the entire pathname. In most cases, you use absolute links when linking to pages or sites that are not part of your own Web site. For example, if you are linking from your Web site to the city of Mikkeli, you type Visit Mikkeli home page! www.mikkeli.fi

38. HTML BasicstMyn38 Relative links are called so because you don’t include the entire pathname of the page to which you are linking. Instead, the pathname you use is relative to the current page. Relative links are most commonly used when you want to link from one page in your site to another, for example: Contact Me Now! This link looks for the file contactMe.html in the same folder that contains this page.

39. HTML BasicstMyn39 If you need to link to a file in a folder above the folder your page is in, you add “../” for each directory up the tree. So, if the file you are linking to is two folders higher than the one you are in, you might use Contact Me Now!

40. HTML BasicstMyn40 Sometimes you may want to link to a section of text within a page on your Web site. To link to a section of a Web page, you must first give that section a name. An anchor is a place within a page that is given a special name, enabling you to link to it later:

41. HTML BasicstMyn41 Section 1 This attribute of the a tag enables you to name a section of your Web page. This is the actual name of the section that prints out onscreen. The value of the name attribute is the name of your section. Use easy-to-remember section names without any spaces or punctuation.

42. HTML BasicstMyn42 To create the link to an anchor, you also use the a tag and the href attribute, as you would when creating any other type of link. To finish the link, you need to include a hash symbol (#) and the anchor name as the value of the href attribute:

43. HTML BasicstMyn43 More in Section 1 This is the name of the anchor we are linking to. This text will be underlined and linked to wherever the “section1” anchor resides. The hash mark tells the browser we are linking to a specific section of the same page.

44. HTML BasicstMyn44 From the previous page: If we want to link to a section of text within a page in the same folder (but to a different page, let us say different.html) then we would have to write More in Section 1 And finally the entire pathname (so to a different folder), for example More in Section 1

45. HTML BasicstMyn45 Instead of using the name attribute of the a tag we can use id (a unique id for the element ) attribute to achieve the same as in the previous pages:

46. HTML BasicstMyn46

47. HTML BasicstMyn47

48. HTML BasicstMyn48

49. HTML BasicstMyn49

50. HTML BasicstMyn50

51. HTML BasicstMyn51

52. HTML BasicstMyn52

53. HTML BasicstMyn53 We can add images in our Web page by using the img tag: The image should be in a Web-friendly file format, such as GIF or JPEG. The value of the src attribute (source) includes the correct path name and location of your file

54. HTML BasicstMyn54 Whenever images appear within a section of text, you may want to alter the alignment. By default, the text starts whenever the image ends and flows below it. Next example puts the image to the left:

55. HTML BasicstMyn55

56. HTML BasicstMyn56

57. HTML BasicstMyn57

58. HTML BasicstMyn58 Next example puts the image to the right:

59. HTML BasicstMyn59

60. HTML BasicstMyn60

61. HTML BasicstMyn61

62. HTML BasicstMyn62 Finally on example where the picture is before the text:

63. HTML BasicstMyn63

64. HTML BasicstMyn64

65. HTML BasicstMyn65

66. HTML BasicstMyn66 The next example utilizes many of the features included so far:

67. HTML BasicstMyn67

68. HTML BasicstMyn68

69. HTML BasicstMyn69

70. HTML BasicstMyn70

71. HTML BasicstMyn71 The tag creates a horizontal line in an HTML page. The hr element can be used to separate content in an HTML page. In HTML the tag has no end tag.

72. HTML BasicstMyn72 Official additions Even if all the examples above were working ones, they all lacked some official components. Let’s add them now:

73. HTML BasicstMyn73

74. HTML BasicstMyn74

75. HTML BasicstMyn75 According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax, for example:

76. HTML BasicstMyn76 Document structure elements are:... –The Root Element of an HTML document; all other elements are contained in this.... –Container for processing information and metadata for an HTML document.... –Container for the displayable content of an HTML document.

77. HTML BasicstMyn77 Document head elements are for example: –Specifies a base URL for all relative href and other links in the document. Must appear before any element that refers to an external resource. HTML permits only one base element for each document. The base element has attributes, but no contents. –Specifies links to other documents, such as previous and next links, or alternate versions. A common use is to link to external stylesheets, using the form:

78. HTML BasicstMyn78 –Can be used to specify additional metadata about a document, such as its author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs. –In one form, meta elements can specify HTTP headers which should be sent by a web server before the actual content, for example: –this specifies that the page should be served with an HTTP header called foo that has a value bar. … –Used for including generic objects within the document header. Though rarely used within a head element, it could potentially be used to extract foreign data and associate it with the current document.

79. HTML BasicstMyn79 … –Specifies a style for the document, usually in the form: … –Define a document title. Required in every HTML and XHTML document. User agents may use the title in different ways. For example: –Web browsers usually display it in a window’s title bar when the window is open, and (where applicable) in the task bar when the window is minimized. –It may become the default filename when saving the page. –Search engines’ web crawlers may pay particular attention to the words used in the title. –The title element must not contain other elements, only text. Only one title element is permitted in a document.

80. HTML BasicstMyn80 The Markup Validation Service by the World Wide Web Consortium (W3C) allows Internet users to check HTML documents for conformance to HTML standards. It also provides a quick method for web page authors to check their posted pages for mark-up errors. HTML validators operate by comparing the mark-up on a web page to the W3C standards. The standards vary depending upon the declared version and so the validator will start by reading the DOCTYPE declaration to see which set of standards to apply. Once the validator has read the page and determined the applicable standards it looks for such things as missing opening or closing tags, missing quotation marks and other hand-coding errors.

81. HTML BasicstMyn81 The validator then provides a report indicating that the coding is correct or not. Errors are noted in a list. One error, such as neglecting to close a tag, can cause a cascade of errors through the page, producing dozens or even hundreds of noted errors. However when the page author addresses the first error listed it will also eliminate the "cascade errors". Many major browsers are often tolerant of certain types of error, and may display a document successfully even if it is not syntactically correct.

82. HTML BasicstMyn82 All mark-up validators suffer from an inability to see the "big picture" on a web page. However they excel at picking up missed closing tags and other technicalities. This does not mean that the page will display as the author intended in all browsers. Even if validated, all web pages should be tested in as many different browsers as possible to ensure that the limitations of the validator are compensated for and that the page works correctly. http://validator.w3.org

83. HTML BasicstMyn83

84. HTML BasicstMyn84

85. HTML BasicstMyn85

86. HTML BasicstMyn86

87. HTML BasicstMyn87

88. HTML BasicstMyn88