CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. Skip to content. Change Language. Related Articles. HTML Basics. HTML Tags. HTML Attributes. HTML Graphics. HTML 5. HTML Course. Back up and access files across devices. Try one month free.
Was this information helpful? Yes No. Thank you! Any more feedback? The more you tell us the more we can help. Can you help us improve? Resolved my issue. Clear instructions. Easy to follow. No jargon. Pictures helped. Didn't match my screen.
Incorrect instructions. Too technical. Not enough information. To make your website as accessible as these top sites, you need to stick to widely accepted web standards, follow the advice in this book, and try your site on different computers. To launch it, go to the Applications folder and then double-click TextEdit. When you load up your text editor, it starts you out with a new, blank document, which is exactly what you want.
Hang on—help is on the way in the rest of this chapter. For now, you can use the following very simple HTML snippet. Just type it in exactly as it appears, text, slashes, pointy brackets, and all:. Technically, this two-line document is missing a few structural details that self-respecting web pages should have. However, every browser can read this HTML fragment and correctly interpret what you want: the two lines of formatted text shown in Figure , top.
That brings up the Save or Save As window, where you fill in the details for your new file Figure Pick a save location for your file, and give it the name popsicles. When you name your file, make sure you include the extension. For example, by using the name popsicles.
Technically speaking, you can use any file extension you want. However, using. For example, using an. If necessary, change the way your text editor encodes your file to UTF This is the TextEdit standard, so Mac users can skip this step. If you use TextEdit, the program may ask if you really want to use the.
To view your work, open the file in a browser Figure If you use the extension. Or you can drag your web page file and drop it onto an open browser window. For example, one common problem is having your document appear in the web browser without formatting and with all the HTML tags showing. In other words, your document looks the same in your browser as it does in your text editor. Any one of several oversights can cause this problem:.
You used the wrong file extension. When you open files directly from your computer rather than from a remote website , your browser may attempt to identify the file type by its extension. If you give your web page the extension.
To avoid this headache, use the. You saved the document in a word processor. The result is that the browser no longer recognizes your tag as a formatting instruction.
To avoid this tag tampering, write your HTML in a text editor. Some text editors let you save your documents in different formats. If you leave your web browser window open while you edit your HTML file in a text editor, the browser will hold on to the old version of your file.
Only later in Chapter 5 will you try out heftier web editors, which do the same job but with more features. If you want some extra practice, you can use the sample files for this chapter. Once you download them to your computer, you can peek inside each one, just as you did with the HTML file you created yourself:.
Simple, right? If you have any doubts, take a minute to practice opening a few more HTML files before you forge on. However, web browsers do give you the chance to sneak a peek at the raw HTML that sits behind any web page. Once you navigate to the web page you want to examine, right-click anywhere on the page and choose View Source or View Page Source the exact wording depends on the browser. A new window appears, showing you the raw HTML that underlies the page. Firefox has a handy feature that lets you home in on just part of the HTML in a complex web page.
Most web pages are considerably more complex than the popsicles. Now that you know how to peer into existing HTML files and how to create your own, the next step is to understand what goes inside the average HTML file.
It all revolves around a single concept— tags. HTML tags are formatting instructions that tell a browser how to transform ordinary text into something visually appealing. If you were to take all the tags out of an HTML document, the resulting page would consist of nothing more than plain, unformatted text.
When creating a tag, you type HTML code between the brackets. Essentially, the code is an instruction that conveys information to the browser about how to format the text that follows. When a browser encounters this tag, it switches on boldface formatting, which affects all the text that follows the tag. You pair most start tags with a matching end tag that switches off the effect. You can easily recognize an end tag. They look the same as start tags, except that they begin with a forward slash.
Pay attention! This example reflects another important principle of browsers: They always process tags in the order in which you place them in your HTML. As you can see, the browser has a fairly simple job. It scans an HTML document, looking for tags and switching on and off various formatting settings.
Adding tags to plain-vanilla text is known as marking up a document, and the tags themselves are known as HTML markup. When you look at raw HTML, you may be interested in looking at the content the text nestled between the tags or the markup the tags themselves. Most tags come in pairs. This combination of start and end tags, along with the text in between, makes up an HTML element. You place content like text inside that container. When you get right down to it, there are really two types of elements:.
Container elements are, by far, the most common type of element. They apply formatting to the content nestled between the start and end tags.
Instead, they insert something, like an image, into a page. This form, called the empty element syntax , is handy because it clearly distinguishes container elements from standalone elements. In the not-so-distant past, web developers were forced to use the empty element syntax—that is, tags that end with a forward slash—because it was an official part of the now superseded XHTML language. Figure puts the two types of elements in perspective.
You can also nest one element inside another. In fact, nesting elements is common practice in building web pages. It lets you apply more detailed style instructions to text by combining all the formatting elements in the same set of instructions. You can also nest elements to create more complicated page components, like bulleted lists see Structuring Your Text.
To see nesting in action, you need another element to work with. For this example, consider what happens if you want to make a piece of text bold and italicized. This word has bold and italic formatting. The following HTML produces exactly the same result.
However, you should always make sure that you close tags in the reverse order from which you opened them. In other words, if you apply italic formatting and then bold formatting, you should switch off bold formatting first, and then italic formatting. For example, you can nest one element inside another, and then nest another element inside that one, and so on, indefinitely. Chapter 2 has the lowdown, and Chapter 3 introduces the best solution, called style sheets.
To solve this problem, you need to replace angle brackets with the corresponding HTML character entity. Character entities stand in for letters and symbols that browsers would otherwise interpret as HTML. Incidentally, character replacement is one of the reasons you can get into trouble if you attempt to write your HTML documents in a word processor. When you save your word processor document as a text file, the program converts all the special characters like angle brackets into the corresponding character entities.
When you open the page in a browser, you see ordinary text, not the formatting you expect. In the early days of the Internet, web browsers were riddled with quirks. When people designed web pages, they had to take these quirks into account. For example, browsers might calculate the margins around floating boxes of text in subtly different ways, causing pages to look right in one browser but appear odd in another. Using these new rules, every browser could display the same page in exactly the same way.
But this change caused a serious headache for longstanding browsers, like Internet Explorer, that had lived through the dark ages of HTML. It had to somehow support the new standards while still being able to properly display existing web pages—including those that relied on old quirks. The web community settled on a simple solution. When designing a new, modern web page, you indicate this fact by adding a code called a document type definition DTD or doctype , which goes at the very beginning of your HTML document Figure When a browser encounters a doctype, it switches into standards mode and renders the page in the most consistent, standardized way possible.
The end result is that the page looks virtually identical in every modern browser. Internet Explorer, for example, switches into the dreaded quirks mode , where it attempts to behave the same way it did 10 years ago, quirks and all. This ensures that really old web pages retain the look they had when they were first created, even if they rely on ancient browser bugs that have long since been fixed.
Unfortunately, different browsers behave differently when you view a page without a doctype. For that reason, web pages without doctypes are bad news, and you should avoid creating them.
But today, web developers almost always use the simple, universal HTML5 doctype:. Instead, it just indicates that the language is HTML.
0コメント