{"id":27,"date":"2005-10-04T21:34:09","date_gmt":"2005-10-04T21:34:09","guid":{"rendered":"http:\/\/www.eyoungwon.com\/journal\/?p=27"},"modified":"2006-10-17T02:13:03","modified_gmt":"2006-10-17T02:13:03","slug":"introduction-to-html-and-xhtml","status":"publish","type":"post","link":"https:\/\/eyoungwon.com\/journal\/introduction-to-html-and-xhtml\/","title":{"rendered":"Introduction to HTML and XHTML"},"content":{"rendered":"

Web Design – Introduction to HTML and XHTML
\nLast updated Sep 23, 2005.
\n HTML Files, Elements and Tags, and Document Structure<\/strong><\/p>\n


\nThe Web Design guide provides a background<\/a> on SGML, HTML, XHTML, and XML; it even includes a quick and dirty intro to XHTML<\/a>. While all that is nice, some shouts of “Start at the beginning!” echo as someone, somewhere is new to markup languages.
\nMany excellent tutorials introduce the basics of HTML; however, they often teach deprecated markup. Deprecated means “obsolete,” but browsers still understand them\u00e2\u20ac\u201dthe concept is similar to backward compatibility. Bold<\/strong> is a common deprecated element. Instead of , standards recommend using cascading style sheets (CSS) for adding heavy emphasis on text because bold is presentational. But, let’s slow down before we stray off topic.<\/p>\n

This tutorial shows the recommended way to do markup while using XHTML. HTML and XHTML are similar, but XHTML has stricter rules.<\/p>\n

For example, with paragraph ( ), HTML isn’t picky about whether or not you include the closing whereas XHTML demands to see it. HTML is not case sensitive, which means it doesn’t matter if you use or . However, XHTML requires everything to be in lower case. So all tags use lower case.<\/p>\n


\nHTML Files<\/strong><\/strong><\/p>\n

<\/strong>HTML stands for HyperText Markup Language. At its most basic, a Web page is an HTML file (those of you shouting out there with PHP, ASP, or ColdFusion pages\u00e2\u20ac\u201dbear with me\u00e2\u20ac\u201dwe’re talking HTML today) with markup tags. These tags give the browser direction on how to display the page and its content. An HTML file uses the .htm or .html extension.<\/p>\n


\n<\/strong><\/strong> To create an HTML page, all you need is a text editor like Notepad, WordPad, or SimpleText for those on a Mac. You can find other freeware or general public license (GPL or GNU GPL) text editors on the Internet by doing a search for “free text editors.” GPL, or GNU GPL, is free license software, which is also known as open source software. You can find many of these at Sourceforge<\/a>.<\/strong><\/strong><\/p>\n


\n<\/strong><\/strong> If you have a WYSIWYG (What You See Is What You Get) editor\u00e2\u20ac\u201dan application that displays the contents of a page almost exactly as you would see it in a browser or on a printout\u00e2\u20ac\u201dsuch as FrontPage, Dreamweaver, or GoLive, I recommend starting with a text editor anyway. It’s an excellent learning tool and it helps you in working with these WYSIWYG applications. <\/strong><\/strong>
\nWhat about Microsoft Word? Well, you can use it as long as you save each file as text. Microsoft Word has the ability to enter its own code, which tends to cause problems in an HTML file. Fire up your text editor, save a new file as example.html\u00e2\u20ac\u201dyou can name the file whatever you’d like as long as it ends with .htm or .html\u00e2\u20ac\u201dand enter the examples we cover in this article. Save often. Some text editors might add .txt at the end of the file name. If this happens, you can rename the file to remove it by right-clicking on the file, selecting rename, and removing .txt.<\/p>\n


\n<\/strong><\/strong> Since you already have a browser (as that’s how you’re viewing this page), your computer most likely knows what to do when you double-click on an .htm or .html file, which is to open it in your browser. Alternatively, you can open your browser, select File > Open File, browse the file window until you find your file, select the file, and click Open.<\/p>\n


\n<\/strong><\/strong> You can also open an .htm or .html file in your text editor by locating the file through the File > Open command or right-clicking on the file name, selecting Open With…, and choosing NotePad. If you do not see Open With, click Open instead.<\/p>\n


\nElements and Tags<\/strong><\/strong><\/p>\n

<\/strong>I promise, no chemistry lesson here\u00e2\u20ac\u201dwe’re talking about elements with two tags, text, and sometimes other elements. Nothing liquid or hazardous. Tags are closed in with the angle brackets, which use the less than (<) and greater than (>) symbols. Element content appears between the start tag and end tag. Reading markup is like reading English, from left to right, and top to bottom. The following is an example of a heading: <\/strong><\/strong><\/p>\n

Web Site Name<\/strong><\/strong><\/h1>\n


\n<\/strong><\/strong><\/p>\n

is the start tag while <\/strong><\/strong><\/h1>\n

is the end tag. The start tag indicates to apply the element from this point forward and the end tag tells the browser when to stop applying the element. The element in the example consists of heading 1 along with the tags and the content. Let’s expand the page to include the page name for the content: <\/strong><\/strong><\/p>\n

Web Site Name<\/strong><\/strong><\/h1>\n


\n<\/strong><\/strong><\/p>\n

Title of the Page<\/strong><\/strong><\/h2>\n


\nNotice we don’t use <\/strong><\/strong><\/p>\n

instead of <\/strong><\/strong><\/h3>\n

or <\/strong><\/strong><\/h1>\n

. It wouldn’t be logical. Some people do this because they want the text to appear smaller than the default style for<\/h2>\n

and<\/h1>\n

. The heading’s job is to identify the text and its place within the document’s pecking order, or hierarchy. Presentational markup will take care of how it looks. Also note that we use lower case ‘h’ instead of ‘H’. XHTML requires this and HTML doesn’t care either way.
\nRequired Tags
\nEvery .html file should have the following tags:
\nandand
\nand
\nappears at the beginning, telling the browser this is the start of an HTML document. appears at the end of the file telling the browser the HTML document ends here.
\nContent appearing between and includes the header information such as is what goes at the top of the browser’s window. This usually has the name of the Web site, the Web page, or related information.
\nAfter comes , which includes the bulk of the content. goes at the end of the file prior to (nothing should be between these two closing tags.). Let’s create a basic document with these tags, so you don’t have to enter them every time. Put the following in a new text page:<\/p>\n

content<\/p>\n

Save the file as starter.html. Whenever you need to start a new page, just open starter.html, save the file with SAVE AS, and give it a new name (example.html will do fine) before you do anything else. This ensures you don’t overwrite your starter page.
\nStructure the Document (English: Make the Document Readable)
\nYou may have heard variations of “separate presentation and content” or “separate style and structure.” Content or structure refers to the text itself\u00e2\u20ac\u201dnot what color it is or what it looks like. Presentation and content do, however, need each other. While you could leave out presentation or style tags, the resulting document would resemble a page from the Internet’s early days\u00e2\u20ac\u201da long white document with a few bold headers here and there. No columns. Nothing to make it look pretty.
\nStructural elements define the purpose of the text. All of these, of course, have end tags such as <\/strong><\/strong><\/h2>\n

or . These include: headings – <\/strong><\/strong><\/p>\n

, <\/strong><\/strong><\/h1>\n

, <\/strong><\/strong><\/h2>\n

, <\/strong><\/strong><\/h3>\n

, <\/strong><\/strong><\/h4>\n
, and <\/strong><\/strong><\/h5>\n

\nparagraphs – <\/strong><\/strong>
\nlist items – <\/strong><\/strong><\/p>\n

  • \nquotes – <\/strong><\/strong><\/p>\n


    \nFor example, the following has no elements, so it appears exactly as you see it here.
    \nTitle of Document Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede. Nam mi. Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede. 1. Nam mi. 2. Aenean metus felis. 3. ultrices quis 4. ornare in. Proin mollis. Etiam augue sem, lacinia sed, porttitor eget, fermentum at, tortor. Vestibulum fringilla. Vestibulum consequat nisl.
    \nThat’s hard to read, isn’t it? This resembles a long email without paragraph breaks. How about adding a header, paragraph, and list items? That should make it readable like the following content. Feel free to copy this in your example.html file between the and tags. <\/strong><\/strong><\/p>\n

    Title of Document<\/strong><\/strong><\/h1>\n

    This is heading 2<\/strong><\/strong><\/h2>\n

    This is heading 3<\/strong><\/strong><\/h3>\n

    This is heading 4<\/strong><\/strong><\/h4>\n
    This is heading 5<\/strong><\/strong><\/h5>\n
    This is heading 6<\/strong><\/strong><\/h6>\n

    Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede. Nam mi. Nulla facilisi. Aliquam adipiscing, libero in mollis eleifend, ipsum pede laoreet metus, sed consectetuer ante dolor eget nunc. Vestibulum in pede.<\/strong><\/strong><\/p>\n


    \n<\/strong><\/strong>Proin mollis. Etiam augue sem, lacinia sed, porttitor eget, fermentum at, tortor. Vestibulum fringilla. Vestibulum consequat nisl.<\/strong><\/strong><\/p>\n


    \nThough it’s not in English, it’s easier on the eyes. What if you need the name of the Web site, title of the page, and two headers followed by paragraphs? Before looking at the markup below, see if you can do it. Hint: use <\/strong><\/strong><\/p>\n

    , <\/strong><\/strong><\/h1>\n

    , <\/strong><\/strong><\/h2>\n

    , and <\/strong><\/strong>. Remember to use the end tag. <\/strong><\/strong><\/h3>\n

    InformIT<\/strong><\/strong><\/h1>\n

    Reference Guides<\/strong><\/strong><\/h2>\n

    Web Design Guide<\/strong><\/strong><\/h3>\n


    \n<\/strong><\/strong>Welcome to the InformIT.com Web Design Reference Guide. You may have seen other reference guides, for example, Flash and Photoshop. Flash and Photoshop certainly play a role in Web design, but unlike those topics, this guide provides a snapshot of everything Web design. The information in this guide includes reference, news, and access to the Web design community.<\/strong><\/strong><\/p>\n

    Photoshop Guide<\/strong><\/strong><\/h3>\n

    Unless you accidentally stumbled here, you probably know what Photoshop is and you want to learn more or look for a solution to a nagging problem.<\/strong><\/strong><\/p>\n

    Try viewing the file in a browser by double-clicking on the file name or opening it from within the browser. This is how it appears in a browser:<\/strong><\/strong><\/p>\n

    Figure 1<\/a>
    \nHow did your results turn out? For practice, try creating a Web site for your friends or family using the elements we covered in this section. Also, throw in a <\/strong><\/strong><\/p>\n

    and <\/strong><\/strong><\/h4>\n
    and their end tags to see how they compare to the others.
    \nAnother great learning tool is studying the Web sites of others by viewing their source codes. To view, do the following:
    \nClick View
    \nClick Source (In Firefox, it’s Page Source)
    \nThat’s it. You may not recognize all of the markup or the added code. No worries. It’ll get easier as you do more HTML work. In no time, you’ll be writing nice, clean XHTML-acceptable markup.<\/strong><\/strong> <\/strong><\/strong><\/h5>\n<\/blockquote>\n<\/li>\n<\/h6>\n","protected":false},"excerpt":{"rendered":"

    Web Design – Introduction to HTML and XHTML Last updated Sep 23, 2005. HTML Files, Elements and Tags, and Document Structure The Web Design guide provides a background on SGML, HTML, XHTML, and XML; it even includes a quick and dirty intro to XHTML. While all that is nice, some shouts of “Start at the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:attachment":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}