• Tidak ada hasil yang ditemukan

HTML&CSS design and build websites

N/A
N/A
YD GR

Academic year: 2023

Membagikan "HTML&CSS design and build websites"

Copied!
514
0
0

Teks penuh

Limitation of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties regarding the accuracy or completeness of the content of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. Background pages appear on white; they explain the context of the topics discussed in each chapter.

Diagram and infographics pages are shown on a  dark background. They provide a simple, visual  reference to topics discussed.
Diagram and infographics pages are shown on a dark background. They provide a simple, visual reference to topics discussed.

PractIcaL

When you're viewing a website, it's likely that your browser receives HTML and CSS from the web server that hosts the site. The web browser interprets the HTML and CSS code to create the page you see.

PARISLONDON

In the browser window, you will see a web page with exactly the same content as the Word document you encountered on page 18. And if the page is long, it may be split into several subheadings.

.

To create a paragraph, surround the words that make up the paragraph with an opening

. The element also represents a section of text that will be presented in a visually different way (for example, keywords in a section), although the use of the element does not imply any additional meaning.

This introduces you to the element, which allows you to indicate where emphasis should be placed on selected words and the

. For example, a screen reader's voice might emphasize the words in the element, or a search engine might register that your page contains a quote when you use the
element.

The element indicates something that is no longer accurate or relevant (but should not be removed).

Each item in the list is placed between an opening

  • tag and a closing
  • tag. It is better to use the CSS list style type property covered on pages 333-335. lt;li>Cut potatoes into quarters. lt;li>Simmer in salted water for 15-20 minutes until soft. lt;li>Heat milk, butter and nutmeg. lt;li>Drain potatoes and mash. lt;li>Mix into the milk mixture. chapter-03/ordered-lists.html HtM l. lt;li>1 kg King Edward potatoes. lt;li>Freshly grated nutmeg. lt;li>Salt and pepper to taste. chapter-03/unordered-lists.html HtM l. You can place a second list inside a
  • element to create a sublist or nested list.

    The main home page of a website written in HTML (and the home pages of each section in a subfolder) is called index.html.

    As long as the page you're linking to has id attributes that identify specific parts of the page, you can simply add the same syntax to the end of the link for that page. The

    element is used with an id attribute at the top of the page so that a link can be added to take readers from the bottom of the page to the top. There is an email link to enable readers to contact the author of the web page.

    If you're building a website from scratch, it's good practice to create a folder for all the images the website uses.

    Many species undertake annual long-distance migrations, and many more species make shorter, irregular journeys.

    . If the is followed by a block-level element (such as a paragraph), the block-level element will be on a new line after the image, as shown in the first example on this page. If the element is in a block-level element, any text or other inline elements will flow around the image, as shown in the second and third examples on this page.

    When you set the align attribute to left, the image is positioned to the left and the text flows around it. When you set the align attribute to right, the image is positioned to the right and the text flows around it. If the text runs right to the edge of the image, it can be harder to read.

    You'll learn how to add a gap between text and images on pages 313-314 using the CSS padding and margin features.

    The value of top places the first line of text near the top of the image and subsequent lines of text appear below the image. The advantage of creating line drawings in vector format is that you can increase the dimensions of the image without affecting its quality. Each extra frame of the image increases the size of the file, and thus can add to the time it takes for an image to download (and web users don't like to wait a long time for images to download).

    If the transparent part of the image has straight edges and is 100% transparent (that is, not semi-opaque), you can save the image as a GIF (with the transparency option selected).

    In this example, the logo is a GIF because it uses flat colors, while the photos are JPEGs. The main picture is placed inside the HTML5

    element and has its own title. There are several types of information that should be displayed in a grid or table.

    When you present information in a table, you need to think in terms of a grid of rows and columns (somewhat like a spreadsheet).

    Browsers usually display the content of a element in bold and in the center of the cell. The colspan attribute can be used on a or element and indicates how many columns that cell should span. This is because, when a cell spans more than one column, the or .

    The rowspan attribute can be used on a or element to specify how many rows a cell should span in the table.

    There are three elements that help distinguish between the main table content and the first and last rows (which may contain different content). These elements are helpful for people using screen readers, and they also allow you to style these sections differently than the rest of the table (as you'll see when you learn CSS).

    I've added some CSS styling to this example so you can see the contents of the . The value of this attribute is the width of the table or cell in pixels. I added CSS styles to this example so you can see the width of the table cells more clearly.

    Each table cell must be counted by a or .

    The server needs to know which piece of input data corresponds to which form element. To distinguish between different entries, information is sent from the browser to the server using name/value pairs. You should never rename a form control on a page unless you know that the code on the server will understand this new value.

    They are hidden this way so that if someone is looking over the user's shoulder, they cannot see sensitive data such as passwords.

    When a question offers users options for answers in the form of radio buttons, the value of the name attribute must be the same for all the radio buttons used to answer that question.

    Check boxes allow users to select (and deselect) one or more options in response to a question. When a question offers users options for answers in the form of checkboxes, the value of the name attribute must be the same for all the buttons that answer that question. The value attribute indicates the value sent to the server if this checkbox is checked.

    Unfortunately, the way browsers have implemented this feature is not perfect, and it should be tested thoroughly if used (especially in Firefox and Safari on a Mac).

    If you want to allow users to upload a file (for example, an image, video, mp3, or a PDF), use a file input box. When a user clicks the Browse button, the presentation of the window that allows them to search for the file they want to upload will match the windows of the user's operating system. To control the appearance of a submit button, you can either use CSS (which you'll learn on page 343), or you can use an image for the button.

    If you want to use an image for the submit button, you can give the type attribute an image value.

    Older browsers that do not recognize these entries will only treat them as a single line text field. If you ask the user for a date, you can use . Browsers that support HTML5 validation will verify that the user has entered information in the correct email address format.

    Browsers that support HTML5 validation check whether the user has provided information in the form of a URL.

    On a long page, you'll often see comments, which are used to indicate where parts of the page begin or end, and to pass notes to help anyone looking at the code understand it. These substances are so commonplace, they hardly attract attention - and yet they guarantee our very existence.

    . As you'll see when you come to look at CSS in the next section, an element's unique identity gives you the ability to style it differently than any other instance of the same element on the page.

    For example, you might want to style one paragraph on the page (perhaps a paragraph with a pull quote) differently than all the other paragraphs.

  • Gambar

    Diagram and infographics pages are shown on a  dark background. They provide a simple, visual  reference to topics discussed.
    html5: fIgure and  fIgure CaptIon

    Referensi

    Dokumen terkait