HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define. We have put together a course that includes all the essential information you need to work towards your goal. Before starting this topic, you should have at least basic familiarity with using computers and using the web passively i. You should have a basic work environment set up as detailed in Installing basic software , and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.
It is recommended that you work through Getting started with the web before attempting this topic. However, this isn't absolutely necessary; much of what is covered in the HTML basics article is also covered in our Introduction to HTML module, albeit in a lot more detail.
This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one. This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.
Thank you, Yaakov! And the field trip was good. Thank you Coursera and Yaakov Chaikin for this wonderful course! Access to lectures and assignments depends on your type of enrollment.
If you take a course in audit mode, you will be able to see most course materials for free. To access graded assignments and to earn a Certificate, you will need to purchase the Certificate experience, during or after your audit. If you don't see the audit option:. When you purchase a Certificate you get access to all course materials, including graded assignments.
Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
If you only want to read and view the course content, you can audit the course for free. Yes, Coursera provides financial aid to learners who cannot afford the fee. Apply for it by clicking on the Financial Aid link beneath the "Enroll" button on the left. Learn more. More questions? Visit the Learner Help Center. Computer Science. Mobile and Web Development. Yaakov Chaikin. Enroll for Free Starts Nov Offered By. About this Course 1,, recent views. Flexible deadlines.
Shareable Certificate. Hours to complete. Available languages. Instructor rating. Offered by. Johns Hopkins University The mission of The Johns Hopkins University is to educate its students and cultivate their capacity for life-long learning, to foster independent and original research, and to bring the benefits of discovery to the world.
Week 1. Video 18 videos. Course Introduction 3m. Development Environment Setup, Part 1 3m. Development Environment Setup, Part 2: Windows 6m. Resources for Asking Questions 5m. Lecture 7: Lists 5m. Lecture 9: Creating Links 9m. Lecture Displaying Images 6m. Module 1 Wrap-Up 30s. Reading 7 readings.
Recommended Books 10m. Frequently Asked Questions 2m. Quiz 12 practice exercises. Optional Practice Quiz 30m. Week 2. Video 27 videos. Lecture Power of CSS 5m. Lecture Combining Selectors 9m. Lecture Pseudo-Class Selectors 9m. Lecture Style Placement 5m. Lecture 17, Part 1: Conflict Resolution 8m. Lecture 17, Part 2: Conflict Resolution 6m. Unrecognized markup.
Depending on the element and the browser, this can have varied results. The browser may display nothing at all, or it may display the contents of the tag as though it were normal text. Text in comments. See the Adding Hidden Comments sidebar later in this chapter. There are a couple of things to be learned here. The first thing that is apparent is that the browser ignores line breaks in the source document. The sidebar What Browsers Ignore lists other information in the source that is not displayed in the browser window.
Second, we see that simply typing in some content and naming the document. Once the browser knows the structure of the content, it can display the page in a more meaningful way. We have our content saved in an. A generic container element is labeled in Figure Elements are identified by tags in the text source. The browser knows that any text within brackets is hidden and not displayed in the browser window. Be careful not to use the similar backslash character in end tags see the tip Introducing HTML elements.
The tags added around content are referred to as the markup. It is important to note that an element consists of both the content and its markup the start and end tags. Not all elements have content, however.
Some are empty by definition, such as the img element used to add an image to the page. One last thing In HTML, the capitalization of element names is not important. Many web developers have come to like the orderliness of the stricter XHTML markup rules and stick with all lowercase, as I will do in this book. The slash character is found under the question mark?
The backslash key will not work in tags or URLs, so be careful not to use it. Figure shows the recommended minimal skeleton of an HTML5 document. But I feel it is better, particularly for beginners, to explicitly organize documents with the proper structural markup. And if you are writing in the stricter XHTML, all of the following elements except meta must be included in order to be valid.
I have a lot more to say about DOCTYPE declarations in Chapter 10 , but for this discussion, suffice it to say that including it lets modern browsers know they should interpret the document as written according to the HTML5 specification. The entire document is contained within an html element. The html element is called the root element because it contains all the elements in the document, and it may not be contained within any other element.
Within the html element, the document is divided into a head and a body. The meta elements within the head element provide information about the document itself. A meta element can be used to provide all sorts of information, but in this case, it specifies the character encoding the standardized collection of letters, numbers, and symbols used in the document. Prior to HTML5, the syntax for specifying the character set with the meta element was a bit more elaborate.
If you are writing your documents in HTML 4. Also in the head is the mandatory title element. According to the HTML specification, every document must contain a descriptive title. Finally, the body element contains everything that we want to show up in the browser window. Are you ready to add some structure to the Black Goose Bistro home page?
Open the index. Open the newly created document, index. Next, create the document head that contains the title for the page. The correct terminology is to say that the title element is nested within the head element. When you are done, the source document should look like this the markup is shown in color to make it stand out :. Save the document in the bistro directory, so that it overwrites the old version.
Figure shows how it should look now. Not much has changed after structuring the document, except that the browser now displays the title of the document in the top bar or tab. The purpose of HTML is to add meaning and structure to the content. It is not intended to provide instructions for how the content should look its presentation. Your job when marking up content is to choose the HTML element that provides the most meaningful description of the content at hand. In the biz, we call this semantic markup.
For example, the most important heading at the beginning of the document should be marked up as an h1 because it is the most important heading on the page. The important thing is that you choose elements based on what makes the most sense for the content. Not only is a title element required for every document, it is quite useful as well. Descriptive titles are also a key tool for improving accessibility, as they are the first thing a person hears when using a screen reader. Search engines rely heavily on document titles as well.
Another best practice is to put the part of the title with more specific information first for example, the page description ahead of the company name so that the page title is visible when multiple tabs are lined up in the browser window. In addition to adding meaning to content, the markup gives the document structure. The way elements follow each other or nest within one another creates relationships between the elements.
The underlying document hierarchy is important because it gives browsers cues on how to handle the content. It is also the foundation upon which we add presentation instructions with style sheets and behaviors with JavaScript.
Although HTML was intended to be used strictly for meaning and structure since its creation, that mission was somewhat thwarted in the early years of the Web. With no style sheet system in place, HTML was extended to give authors ways to change the appearance of fonts, colors, and alignment using markup alone.
Those presentational extras are still out there, so you may run across them if you view the source of older sites or a site made with old tools. OK, enough lecturing. Open the document index. Our page also has three subheads. Mark them up as Heading Level 2 h2 elements in a similar manner. Finally, in the Catering section, I want to emphasize that visitors should just leave the cooking to us.
To make text emphasized, mark it up in an emphasis element em element, as shown here. You should see a page that looks much like the one in Figure With the elements properly identified, the browser can now display the text in a more meaningful manner. Although it may seem like stating the obvious, it is worth pointing out that the heading and paragraph elements start on new lines and do not run together as they did before.
That is because by default, headings and paragraphs display as block elements. Browsers treat block elements as though they are in little rectangular boxes, stacked up in the page. Each block element begins on a new line, and some space is also usually added above and below the entire element by default. In Figure , the edges of the block elements are outlined in red.
By contrast, look at the text we marked up as emphasized em. It does not start a new line, but rather stays in the flow of the paragraph. That is because the em element is an inline element. Inline elements do not start new lines; they just go with the flow. In Figure , the inline em element is outlined in light blue. You can leave notes in the source document for yourself and others by marking them up as comments. Comments are useful for labeling and organizing long documents, particularly when they are shared by a team of developers.
In this example, comments are used to point out the section of the source that contains the navigation. It cuts some bytes off the file size as well. The other thing that you will notice about the marked-up page in Figure and Figure is that the browser makes an attempt to give the page some visual hierarchy by making the first-level heading the biggest and boldest thing on the page, with the second-level headings slightly smaller, and so on.
How does the browser determine what an h1 should look like? It uses a style sheet! All browsers have their own built-in style sheets called user agent style sheets in the spec that describe the default rendering of elements. The default rendering is similar from browser to browser for example, h1 s are always big and bold , but there are some variations long quotes may or may not be indented.
If you think the h1 is too big and clunky as the browser renders it, just change it with a style sheet rule. In the days before ubiquitous style sheet support, elements were abused in just that way. What fun is a web page with no image?
0コメント