Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Essentials of HTML Instructor: Jeanne Hart I have been designing web sites for almost 20 years. I worked as a part of a Web Team for the State of NJ Judiciary. I’m a stickler for proper HTML code! I have a BA in Art History and a Masters in Education in Adult and Distance Learning. I can be reached by email at: [email protected] I will be here on time I will teach all 4 classes Hopefully I will make learning HTML a fun experience I will always be available for help to be on time to class to attend all 4 classes to ask for help if you need it not to be afraid to offer help not to be afraid of HTML code have fun learning In this class you will learn why HTML is so important to the internet. You will also learn the basic tags to create your first HTML page and learn how to use HTML to add text and headings in your Web page and how to format your text. Does anyone know? Can’t anyone write for the web? Languages such as HTML, serve an important purpose when it comes to sharing information over long distances.” Your computer has a Web browser, such as Internet Explorer or FireFox, or Chrome installed on it. First, your browser has to find the computer that is storing that information and it does this using the HTTP. The storage computer, or server, sends the new web page (as a plain text file) back to your computer using the same HTTP. Finally, and this is what you need to know, the browser sees the new Web page and interprets the text and HTML tags to show you the formatting, graphics, and text that appear on the page. As great as Web browsers are, you should be aware that they have limitations! Some older browsers do not understand the newer HTML commands and might produce errors rather than text. What's more, some of the newest browsers enable viewers to determine which window display sizes, fonts, and colors they prefer when viewing Web pages (even if those settings are different from what you, the Web author, want them to see) You can create Web page files in any plain text editor and view them in any browser but, you have to decide how you are going to store the files. You already know that you can't surf the Net without having an Internet Service Provider (ISP). In the same way, you need a Web Presence Provider (WPP) or an ISP or your own Web server to store your pages before they can be viewed from the Web. Tonight, you will create a template for yourself that already includes the tags that you need to create your first web page. Then, when ever you want to create a new Web page you will be able to open your template file, add your new text, and save the new file. The next thing you have to do is give the page a DOCTYPE, which by the way is the only tag in HTML that uses all caps! Why, you ask, must I do this? Adding a DOCTYPE is what the browser is going to look at first!” <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1transitional.dtd"><html xmlns="http://www.w3.org/199 9/xhtml"> The <!DOCTYPE> tag has three variations: Strict Transitional Frameset You declare which one you are using in the top of the file. HTML isn ‘t as difficult as you might think. It’s a language that just includes an opening tag like this, <p> and a closing tag like one</p> Any guess what the <p> stands for? You can create Web pages using some WYSIWYG programs, for now you’ll concentrate on learning HTML and use Note Pad for all your labs. After the DOCTYPE, every HTML document must begin with the <html> tag and end with its compliment, the </html> tag. All HTML documents are separated into two parts: the head and the body. Because the title contains information about the document, the <title> and closing </title> tags are placed within the opening <head> and closing </head> tags. 1. The opening <head> tag and the closing </head> tags are used to indicate any information about the document itself. You'll learn how to add some of this information in later lessons. 2. The <title> and </title> tags are used to add a title to your browser's Title bar. The Title bar is the colored band at the top of any browser that gives the name of the html page. 3. The opening <body> tag and the closing </body> tags are used to surround any and all content that appears in the HTML page. And, there is only, ever, one opening body tag and one closing! If you were to create a simple HTML page, you would see that the four tags we just discussed are present in this document Doctype – (the doctype always come first in any html document) <html> <head> <title> My First Web Page </title> </head> <body> <p> This is my First Web page </p> </body> </html> For now, almost all HTML tags come in pairs. You use the first tag in the pair (for example, <html>) to tell the computer to start applying the format. You use the second tag (for example, </html>) requires a slash in front of the tag name that tells the computer to stop applying that format. The first tag is usually referred to by the name within the bracket, for example, opening html tag. You can refer to the second tag as the the closing tag, for example, closing html tag. To view your own page in a browser, you must first save it. Because you've created an HTML document, you want to save your file with an .htm extension (first.htm, for example) so that you recognize it quickly. You should also be aware of difference between html and htm Some people prefer to name their HTML files with an .html extension (for example, first.html). Some older computer systems, however, still require the file extension to be three characters or fewer and might have trouble reading (or storing) a file with a longer extension. You can preview any HTML file in your browser, even when that file is stored on your computer rather than on a Web server. In Internet Explorer, you can view your new file by selecting Open from the File menu and finding the page you created to view. In HTML, a paragraph is created whenever you insert text between the <p> tags. <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199 9/xhtml"> <head><title>My HTML Page</title></head> <body> <p>This is my first HTML page.</p> </body> </html> Web browsers see that you want a paragraph and they display it. Web browsers don't pay any attention to how many blank lines you put in your text; they only pay attention to the HTML tags. In the following HTML code, you see several lines of text and even a blank line, but the browser only recognizes paragraphs surrounded by the <p> and </p> tags (or paragraph tags). The <p> tag tells the browser to add a blank line before displaying any text that follows it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>Typing Paragraphs in HTML</title> </head> <body> <p>This is the first paragraph. But is this the second?</p> <p>No, this is.</p> </body> </html> Web browsers do something else with paragraph text that you should be aware of: They wrap the text at the end of the browser window. In other words, when the text in your Web page reaches the edge of the browser window, it automatically continues on the next line regardless of where the <p> is located. The <p> tag always adds a blank line, but you might not always want a blank line between lines of text. Sometimes you just want your text to appear on the next line (such as the lines of an address or a poem). You can use a new tag for this: the line break, or <br /> tag You will occasionally want to add emphasis to your text to make it stand out. HTML enables you to quickly apply some standard formats, such as boldface and italic, using a predefined set of tags. <em> </em> for italics and <strong> </strong> for bold Other formatting tags exist in HTML, but their use is discouraged in HTML in favor of style sheets. Deprecated Tags - Some older HTML tags, specifically related to formatting, have been replaced by the formatting capabilities of style sheets. Style Sheets - Web developers use style sheets to specify formatting instructions for a single document or a group of documents. Separating your text into paragraphs isn't the only way to format your Web pages. HTML enables you to add six different heading tags to your pages by using the tags <h1> through<h6>. These tags are very simple to use. Let’s look at them: <h1>This is Heading 1</h1> The closing heading tags also create an automatic paragraph break. In other words, all headings automatically include a blank line to separate them from the text. Heading 1, the <h1> tag, has the largest font of the heading tags and Heading 6, the <h6> tag, has the smallest. In fact, you usually only see Web page authors use the <h1><h2><h3> tags because the remaining tags, <h4><h5><h6>, are actually smaller than normal text. Unless you or the people viewing your pages have adjusted the browser's default settings, normal HTML body text appears in 12 point Times New Roman font on most computer systems. Here's a special character that you should remember: The symbol stands for nonbreaking space and is used to insert a space inside an HTML document. HTML ignores extra spaces between words and tags so you'll need to have a way of including extra spaces. You can do that with the character. A great tag to remember is the comment tag It looks like this: <!- text goes in here - -> And where the text goes can be any text but it will not be seen by the browser. If you have a page that you update several times a day and you want to make sure that people always see the most recent version, you can enter the page's own URL in the refresh tag. When the browser sees the refresh tag, it presents the requested URL in the specified time.<meta http-equiv="refresh" content="time in seconds, URL for this page" /> Why might that be helpful on a web and on what type of page? Tonight you learned about: 1. The DOCTYPE 2. the 4 basic tags to create a web page 3. how to format the text on your pages 4. how to add comments to your web page You also learned about: • • • • Web browsers • Tags to format the text for your web pages the DOCTYPE 4 basic tags needed to create web pages the html tag, the head tag, the body tag and all their closing tags Take 15 minutes and when you come back you’ll be doing the labs for tonight