Write in the notebook found words
develop a website design
layout in a graphic editor,
taking into account the
principles of web-ergonomics
Learning objectives
• use the CSS stylesheet when creating a site
• Can distinguish between basic HTML tags
• Can apply CSS commands for design websites
• Know “class” and “id” selectors
Teaching objectives
The basics of web programming
The basic HTML tags
Inserting pictures and links
Creating tables
Making design for site with internal css
Evaluation criteria
All students
• Can apply basic HTML tags in practice
• Can distinguish between basic HTML tags
• Can apply CSS commands for design websites
• Know “class” and “id” selectors
A form is a tool by which an HTML document can
send information to a predetermined point in the
external world. Forms are used to poll customers,
purchase something (order goods (s)), send e-mail.?
The principle of the forms is the following: the visitor
who came to your site fills in a certain form (inserts
the necessary data there), and after clicking a certain
button, the form takes data from the filled fields and
sends them to the designated place.
Forms are placed between <FORM> </ FORM> tags. An
HTML document can contain several forms, but they do
not need to be one inside the other. The <FORM> tag
can contain the following attributes:
Required attribute. Specifies where the form
handler is located (another file (or script) that
ACTION processes the data received from the form, and
then sends it further)
Determines how data from the form will be passed
METHOD to the handler. Valid values are: METHOD = POST
and METHOD = GET. If the attribute value is not set,
METHOD = GET is assumed by default.
ENCTYPE Defines how the data from the form will be encoded
for transmission to the handler.
To enter information by the user into the form, the
element <INPUT> is used. These are the fields into
which the user enters information. Each <INPUT>
element includes the attribute NAME = name that
specifies the name of this field (field ID).
TYPE=
text Specifies a window for entering a line of text. Can contain additional
attributes SIZE = number (the width of the input window in characters)
and MAXLENGTH = the number (the maximum allowed length of the input
string in the characters): ?? <INPUT TYPE = text SIZE = 20 NAME = User
VALUE = "Website LuksWeb.ru">
A simple form with a field of 20 characters wide for text entry. By default,
the window contains the text LuksWeb.ru, which the user can change.
Specifies the window for entering the password. Absolutely similar to type text,
TYPE= only instead of characters of the entered text shows on the screen asterisks (*):
passwo
rd <INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10>
Specifies the button, when clicked, which starts the process of transferring data
TYPE= from the form to the handler:
submit
<INPUT TYPE=submit VALUE="Отправить">
Specifies the button, when clicked on, that the form fields are cleared. Because
TYPE= this button does not pass data to the handler, the reset button may not have the
reset name attribute:
<INPUT TYPE=reset VALUE=" Сброс ">
A task
In order for site visitors to not only view information, but also send
information to site administrators, they place forms on the pages. Forms
include control elements of various types: text fields, drop-down lists,
check boxes, switches, and so on.
We will place on the Questionnaire page a visitor
questionnaire to find out which of our visitors, with
what purposes and with what programs, receives and
uses information from the Internet, and find out what
information they would like to see on our website. The
entire form is in the container <FORM> </ FORM>.
First of all, we will find out the name of the visitor of
our site and his email address in order to be able to
answer his comments and thank him for visiting the
site.
Create anketa.htm file in Notepad and add the HTML
code that creates text fields for data entry. View the
page in the browser:
<FORM>
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE="text"
NAME="name" SIZE=30> <BR>
E-mail: <BR>
<INPUT TYPE="text"
NAME="e-mail" SIZE=30>
<BR>
</FORM>
Switches. Next, we want to find out which group of users the visitor belongs to. We
propose to choose one of several options: a student, a student, a teacher.
To do this, create a group of radio buttons (radio buttons). This group is created using the
<INPUT> tag with the attribute value TYPE = "radio". All elements in the group must have
the same values for the NAME attribute. For example, NAME = "group". Add HTML code
that creates a group of radio buttons to select one option. View page in browser:
Укажите, к какой группе
пользователей вы себя относите:<BR>
<INPUT TYPE="radio"
NAME="group" VALUE= "schoolboy">УЧАЩИЙСЯ<BR>
<INPUT TYPE="radio"
NAME="group" VALUE= "student">СТУДЕНТ<BR>
<INPUT TYPE="radio"
NAME="group" VALUE= "teacher">УЧИТЕЛЬ<br>
Checkboxes.
Next, we want to find out which Internet services our visitor uses most
often. Here, from the proposed list, he can choose several options at the
same time, marking them with flags. Flags are created in the <INPUT> tag
with the attribute value TYPE = "checkbox".
Flags grouped in a group can have the same values for the NAME attribute.
For example, NAME = "group".
Another mandatory attribute is VALUE, which will be assigned the values
"www", "e-mail" and "ftp". The value of the VALUE attribute must be unique
for each flag, since when it is selected, it is transferred to the server.
The CHECKED attribute, which specifies the default button selection, is not
used in this case.
<form >
Мой любимый предмет:<br>
<input type="checkbox" name="firstname" >
Математика
<br>
<input type="checkbox" name="firstname" >
Физика
<br>
<input type="checkbox" name="firstname" >
Информатика
<br>
</form>
Add HTML code that creates a drop-down list to select one option. View page in?
Browser:
View the page in the browser
<SELECT NAME="browsers">
<OPTION SELECTED> Internet Explorer Internet Explorer
<OPTION> Netscape Navigator
<OPTION> Opera
<OPTION> Neo Planet
</SELECT>
Text area. In conclusion, let's ask what the visitor would like to see on our
pages, what information should be added to them. Since we can not know in
advance how extensive the reader's answer will be, we will take for him the
text area with a scroll bar. In this field, you can enter a sufficiently detailed
text
Add the HTML code that creates the text area for entering comments, view
the page in the browser:
What other information would you like to see on our website?
<BR>
<TEXTAREA NAME="resume"
ROWS=4 COLS=30>
</TEXTAREA
<BR>
The <fieldset> element is for grouping form elements. This grouping
makes it easier to work with forms that contain a large number of
data. For example, one block can be used to enter text information,
and another - for the flags.
Browsers to improve the visualization of the result of using the tag
<fieldset> as a frame.
<fieldset>
<legend>Элементы выбора</legend>
Тело
</fieldset>
P
Practical assignment.docx
