Basic elements of the HTML language - Designing and developing web applications

Basic elements of the HTML language

The title of the HTML document is used to post information relevant to the entire document. It is an obligatory element of the markup. The title marking element serves for naming a document in a web-based network. For example:

& lt; head & gt;

& lt; title & gt; My page & lt// title & gt;

& lt;/head & gt;

The main elements included in the header head are: title - the name of the document; meta - metainformation related to the document; link - general references for this document; style - style descriptors or links to external resources with styles; script - scripts or links to external resources with scripts.

The body of the document , displayed in the browser window, is specified using the element in the tag. It can include the following main elements: hierarchically ordered containers; headings (from h1 to h6); blocks (paragraphs, lists, forms, tables, pictures, etc.); text; drawings and hypertext links.

In the body tag, attributes can be specified. A description of some of the main body attributes is shown in Table. 1.2.

For example, the background attribute specifies the background on which the text of the document is displayed. If the source for the background of the HTML document is a graphic file, for example image.gif, then the corresponding attribute appears in the opening body tag of the body:

& lt; body bacKground = image.gif & gt;

Table 1.2

Some HTML attributes

Attribute

Description

marginheight

Specifies the height of the indent (in pixels) of the top and bottom fields of the document

marginwidth

Specifies the width (in pixels) of the left and right fields of the document

background

Specifies the image to fill the background; value is specified as a full URL or file name with a picture in GIF or JPG format

bgcolor

Specifies the background color of the document

text

Specifies the color of the text in the document

link

Specifies the color of hyperlinks in a document

alink

Specifies the highlight color of hyperlinks at the time of pressing

vllnk

Specifies the color of hyperlinks to documents that were previously viewed

The body element includes markup controls, some of which are shown in Table. 1.3.

Table 1.3

Some markup controls

Tags

Item Description

Attributes

Description

attributes

from

& lt; h1 & gt;

to

& lt; h6 & gt;

The headings indicate the beginning of the section of the document. In HTML, 6 levels of headings are defined: from hi to h6. The text surrounded by the tags & lt; h1 & gt; & lt;/h1 & gt; is large, this is the main title. If the text is surrounded by the tags & lt; h2 & gt; & lt;/h2 & gt;, then it looks slightly smaller (sub-title); and so on to & lt; h6 & gt; & lt;/h6 & gt;

& lt; p & gt;

Tag & lt; p & gt; is used to divide the text into paragraphs. Allows you to align text on the left or right edge, center or width. By default, the text is aligned to the left. This attribute is also applicable to graphics and tables

align

Possible values ​​of the attribute: justify, left, right, center

& gt;

Forced line feed. Used to stop at a specified point the text flow around the object and then continue the text behind the object

clear

Possible values ​​of the attribute; left, right, all

Containers . They are used only for the logical division of the IITML document into parts and no browser actions are called. In

container elements (between the start and end tags) place other elements that need to be managed together.

Containers are created using the div and span tags. Using the div tag, a block container is created, which starts with a new line, and the element following it will also begin with a new line. And with the & lt; span & gt; tag, a line item is created that is placed on the same line as the surrounding text.

The main attributes of containers are id and class. Keep in mind that lowercase containers can only include other lowercase containers, and block containers can include both lowercase and block containers.

Lists. They are one of the most commonly used ways of text structuring. The following types of lists are available: unnumbered (tag & lt; ul & gt;) and numbered (tag

    ).

The unordered list is written as a sequence:

& lt; ul & gt;

& lt; l the first element of the list & lt;/li & gt;

& lt; li & gt; the second element of the list & lt;/li & gt;

& lt;/ul & gt;

You can specify any type of marker at any place in the list. Below are the tags with the attributes of standard markers:

• & lt; ul type- disc & gt; - standard tokens of first-level lists (by default);

• & ul; ul type = circle & gt; - Markers in the form of circles;

• & lt; ul type-'square '' & gt; - square markers.

Numbered lists are created using the & lt; ol & gt; tag together with the type attribute. Such lists can use ordinary numbers, lowercase and lowercase letters, as well as lowercase and uppercase Roman numerals as markers.

Comments are used to explain the document and are displayed by browsers. In HTML, they start with the & lt;! - and end with the - & gt; symbol.

To write to the hypertext links wcb-pages, use the & lt; a & gt; . A link can specify several attributes, the main one of which is href. A simple reference can be written in the form

& lt; a href = example.com & gt; & gt; Example of a hypertext link & lt;/a & gt;

The value of the href attribute is the URL of the document to which the browser will transition.

Images are included in the web page using the & lt; img & gt; tag, which uses the mandatory attribute src, whose value is the name of the output image file. An example of an image insertion: & lt; img src- image.gif alt-'image /& gt;

Images included in a web page can be used as hypertext links, just like plain text. The user of the browser can click on the image and move to a different page. To denote an image as a hypertext mark, the same tag is used as & lt; a & gt; as for the text, but between & lt; a & gt; and & lt;/a & gt; inserts an image tag & lt; img & gt ;. The & lt; img & gt; also has several optional attributes: alt, align, usemap, hspace, vspace, border, width, height.

Tables are included in web pages using the table element. In the content of this element, table rows are specified using the & lt; tr & gt; tag. The rows of the table usually describe the elements (cells) with data using the tags . The headings for the columns and rows of the table are specified using the & lt; th & gt; header tags. These tags are similar to & lt; td & gt ;, but the text between the & lt; th & gt; tags is automatically highlighted in bold and by default is located in the middle of the cell. The & lt; caption & gt; allows you to create table headers. An example of a table description is shown below:

& lt; caption & gt; The composition of the command & lt;/caption>

& lt; tr & gt; & lt; th & gt; ct & gt; IO & lt;/th & gt; & lt; Ш & gt; Position & lt;/Ш & gt; & lt;/tr & gt;

& lt; tr & gt; & lt; td & gt; Ivanov AP & lt;/td & gt; & lt; td & gt; programmer & lt;/td & gt; & lt;/tr & gt;

& lt; tr & gt; & lt; td & gt; Petrov B.A. & lt;/td & gt; & lt; td & gt; designer & lt;/td & gt; & lt;/tr & gt;

& lt;/table & gt;

In the browser, the table description will be displayed as follows:

Showing a table in the browser

Fig. 1.7. Showing a table in a browser

Tables are recommended only for displaying tabular data, and not for specifying the structure of a web document. To specify the document structure, it is recommended to use CSS-styles, as will be described below.

Forms HTML pages are used to input the source data by the user and transfer them for processing on the server. Such forms are specified using the & lt; form & gt; tag, which uses the following basic attributes (for example, see Figure 1.4):

• method - specifies the HTTP method for sending form data to the server (Get or Post).

• action - specifies the address of the resource of the server to which the data will be transferred; it can be a server-side script or a web page template; if not specified, the data will be sent to the same address as the page with the given form was received.

To the form & lt; form & gt; insert controls that show fields for user input (for example, text boxes, check boxes, buttons). The type of the input field is determined by the value of the type attribute. A description of the types of elements included in the form is given in Table. 1.4.

Table 1.4

Basic controls included in the HTML form

Item type

Description

text

Used when you need to enter a small amount of text (one or more lines). In addition, you specify the name attribute to determine the name of the field variable. It has three additional attributes:

• maxlength - limits the number of characters the user enters into the current field. By default, this number is unlimited;

• size - determines the size of the area on the screen that is occupied by the current field. The default value is determined by the browser type;

• maxlength - if its value is greater than size, the browser will scroll the data in the window;

• value - provides the initial value of the input field

checkbox

Used to create checkboxes in which the user can specify the status of "selected/unselected". The name and value attributes must be specified. In some cases, you must initialize this check box, as already selected. In these cases, the & lt; input & gt; must contain a checked attribute

radio

It is used in case, when it is required to organize the choice of one of several possible values ​​(alternatives). The name and value attributes must also be specified

image

When you click on an image, the browser saves the coordinates of the corresponding point on the screen. Next, it processes the information entered into the form. The name and src attributes must be specified. The src attribute contains the URI of the image source file. The align attribute is optional and is used similarly to the same attribute of the & lt; img & gt; tag

password

Using this type, you can organize a password entry without displaying its constituent symbols. It should be remembered that the entered data is transmitted over unprotected communication channels and can be intercepted

button

Used to place buttons on a web page. Has the name and value attributes

File

The control to launch the file selection dialog. To set the default file name, you can use the value attribute

submit

Used as an interface element for completing data entry. It can contain two additional attributes: name and value

reset

Used as an interface element to reset all data entered in the form fields. Additionally, it can contain a value attribute that specifies the inscription on the button image

hidden

Lets you include the values ​​of the name and value attributes that are not shown to the user in the form being sent. They are sent between the server and the browser in the same way as the values ​​of any other fields

Tag & lt; textarea & gt; is used to create a text field from several lines. It uses the following attributes: cols (the number of columns contained in the text area), name and rows (the number of visible lines of the text area).

& lt; select & gt; are used to determine the list of items specified by the & lt; option & gt; tags. It supports three optional attributes: name, multiple - allows you to select more than one value; name - specifies the name of the object; size - specifies the number of list items visible to the user. In the & lt; option & gt; the & lt; select & gt; elements that can have the selected attribute are selected for the initial selection of the default element value, and the value attribute indicates the value returned by the form after the user selects the item. For example:

Your choice:

& lt; select name = choice & gt; & gt;

optionvalue = Option 1 & gt; Option 1 & lt;/option & gt;

option value == Option 2 Option 2 /option & gt;

option value = Dfhbfyn 3 & gt; Option 3 /option & gt;

option selected & gt; Dfhbfyn 4 /option & gt;

/select & gt;

Also We Can Offer!

Other services that we offer

If you don’t see the necessary subject, paper type, or topic in our list of available services and examples, don’t worry! We have a number of other academic disciplines to suit the needs of anyone who visits this website looking for help.

How to ...

We made your life easier with putting together a big number of articles and guidelines on how to plan and write different types of assignments (Essay, Research Paper, Dissertation etc)