You are on page 1of 18

Veebirakenduste Loomine (H

Inglise keel Selet

this is the process of creating a website or web application.


Web development
This is a branch of web development and a type of design
Web design whose tasks include designing user web interfaces for
websites or web applications.
a document that can be opened and viewed using a browser
Web page viewer. Web pages contain text, graphics, sound, video,
animation, hyperlinks to other pages.
a collection of web pages combined in meaning and navigation
Website (i.e. clicking on hyperlinks, you move from one page to
another).
a computer connected to a network that stores web pages and
Web server websites. When you create your website, in order for it to be
visible to the entire Internet, you must copy the site files to the
This is a program that is designed for web browsing.
web server.
Web browser
this is the creation of the client part of the application.
front-end development The front-end developer is engaged in the layout of the
website template and the creation of the user interface.
creating the backend of a web application.
back-end development Back-end developer should know server-side programming
languages (PHP, Java, C# ASP.NET .....); work with data:
this is the process
databases, JSON, of forming web pages, creating HTML
XML.
Site layout templates in accordance with the approved design layout of
the site. The layout process consists in creating page code
The
usingsemantic
a markup element
languageclearly describes itstomeaning
understandable for both
browsers,
Semantic elements the browser and the developer. Examples of non—
semantic elements: <div> and <span> - says nothing about its
the user interface, in other words, is the design of the site:
contents.
user interface (UI) combinations of colors, fonts, icons and buttons.
"user experience". In simple words, this is how the user
user experience (UX) interacts with the interface and how clear and convenient the
site or application is for him.
The <body> element is designed to store the content of a web
<body> page (content) displayed in a browser window. The information
that should be displayed in the document should be placed
Information about
exactly inside the document
the <body> is located
container. between these
Such information includes
<head> tags.
These tags contain the name of the page, which will be
<title> displayed in the frame of the viewer window.
Tags that serve to highlight paragraphs. A new paragraph is
<p> и </p> always separated from the previous one by an empty line.
A tag that serves to transfer text to another line. It can also be
<br> used to separate graphics from text by an interval.
A tag that serves to logically separate the text with a horizontal
<hr> line.
Preformatted text is placed between these tags. It is displayed
<pre> и </pre> on the screen in a font like "courier".
The title of the first level.
<h1> и </h1>
Tags for highlighting text (words, letters) in bold.
<b> и </b>
Tags for highlighting text (words, letters) in italics, type Italic.
<I> и </I>
The text located between these two tags will be underlined.
<U> и </U>
Tags showing the beginning and end of a numbered list
<OL> и </OL>
Tags showing the beginning and end of the bulleted list.
<UL> и </UL>
List Item
<LI>
Tags for inserting a table into an HTML document
<TABLE> и </TABLE>
the name of the table has the ALIGN=TOP parameter -
<CAPTION> и </CAPTION>alignment above the table and ALIGN=BOTTOM - under the
table.
A row of the table. It can have parameters BGCOLOR -
<TR> и </TR> background color inside the row; ALIGN=LEFT, RIGHT,
CENTER - alignment inside the row; VALIGN=TOP, BOTTOM,
Table
MIDDLE column. It can
- vertical have parameters
alignment inside the BGCOLOR
table row. -
<TD> и </TD> background color under the column; ALIGN=LEFT, RIGHT,
CENTER - alignment inside the column; VALIGN=TOP,
Column
BOTTOM, header.
MIDDLE It can have parameters
- vertical BGCOLORstretching
alignment; COLSPAN -
<TH> и </TH> background color under the name; ALIGN=LEFT, RIGHT,
CENTER - alignment; VALIGN=TOP, BOTTOM, MIDDLE -
command to insert COLSPAN,
vertical alignment; a graphic imageROWSPAN - stretching the cell
<IMG SRC ="file.gif"> или <IMG SRC =" file.jpg">
The <a> tag is one of the important HTML elements and is
<a> intended for creating links.
The <div> element is a block element and is designed to
<div> highlight a fragment of a document in order to change the
appearance of the content.
The <main> element is intended for the main content of the
document. The content must be unique and not include typical
<main> blocks like the site header, basement, navigation, sidebar,
search
The form,tag
<nav> etc.
sets the navigation on the site. If there are
several blocks of links on a page, then priority links are usually
<nav> placed in <nav>.
Defines a block to the side of the content for placing headings,
archive links, labels and other information. Such a block is
usually called a "sidebar" or "sidebar".
<aside>
Sets the section of the document, can be used for the news
block, contact information, text chapters, tabs in the dialog
box, etc. The section usually contains a title. It is allowed to
put one <section> tag inside another.
<section>
The <article> tag sets the content of the site, such as news,
<article> articles, blog entries, forums, etc.
The <footer> tag specifies the "basement" of the site or
section, it can contain the author's name, the date of the
<footer> document, contact and legal information.
It is used to group any elements, for example, images and
<figure> captions to them.
Contains a description for the <figure> tag. The <figcaption>
tag must be the first or last element in the group.
<figcaption>
The <form> tag sets the form on the web page. The form is
intended for data exchange between the user and the server.
<form>
The <input> tag is one of the versatile elements of the form
and allows you to create different interface elements and
provide interaction with the user. Mainly <input> is intended for
creating text fields, various buttons, radio buttons and
checkboxes.
<input>
The <select> tag allows you to create an interface element in
the form of a drop-down list, as well as a list with one or
multiple choices, as shown below.
<select>
The <textarea> field is a form element for creating an area in
which several lines of text can be entered. Unlike the <input>
tag, line breaks are allowed in the text field, they are saved
when sending data to the server.
<textarea>
The <fieldset> element is used for grouping form elements.
This grouping makes it easier to work with forms containing a
<fieldset> large number of data.
The <legend> tag is used to create the header of a group of
form elements, which is defined using the <fieldset> tag. A
group of elements is indicated in the browser using a frame,
and the text that is located inside the <legend> container is
embedded in this frame.
<legend>
The <label> tag establishes a relationship between a specific
label, which is usually text, and a form element (<input>,
<label> <select>, <textarea>).
Sets the font family to be used for formatting the content text.
The list of fonts may include one or more names separated by
commas. If the font name contains spaces, for example,
Trebuchet MS, it must be enclosed in single or double quotes.

font-family
Defines the font size of the element. The size can be set in
several ways. A set of constants (xx-small, x-small, small,
medium, large, x-large, xx-large) sets the size, which is called
absolute. In truth, they are not absolutely absolute, because
they depend on the browser settings and the operating
system.
font-size
color Defines the color of the element text.
Sets the font saturation. The value is set from 100 to 900 in
increments of 100. The super—light font that the browser can
display has a value of 100, and the super-fat one has a value
of 900. The normal font type (which is set by default) is
equivalent to 400, the standard bold text is 700.

font-weight
Defines the font type — regular, italic or oblique. When an
italic or oblique font is set for the text, the browser accesses
the system to search for a suitable font. If the specified font is
not found, the browser uses a special algorithm to simulate the
desired type of text. The result and quality may be
unsatisfactory, especially when printing a document.

font-style
Adds text formatting in the form of underscores, strikethrough,
lines above the text and blinking. You can apply more than
one style at the same time by listing values separated by a
text-decoration space.
Defines how lowercase letters should be represented — leave
them unchanged or make them all uppercase of a reduced
size. This way of changing characters is called a capital.
font-variant
Controls the conversion of the element text to uppercase or
uppercase characters. When the value is different from none,
the case of the source text will be changed.
text-transform
Sets the interlining (line spacing) of the text, counting from the
font baseline. Under normal circumstances, the distance
between the lines depends on the type and size of the font
and is determined by the browser automatically. A negative
value of the line spacing is not allowed.
line-height
Defines the horizontal alignment of the text within the element.
text-align
Sets the indentation value of the first line of a block of text (for
example, for a paragraph <p>). There is no impact on all other
lines. A negative value is allowed to create a protrusion of the
first line, but you should check that the text does not go
beyond the browser window.
text-indent
Aligns an element vertically relative to its parent, the
surrounding text, or a table cell.
vertical-align
Defines the spacing between characters within the element.
Browsers usually set the distance between characters based
on the type and type of font, its size and operating system
letter-spacing settings.
Defines the background color of the element. Although this
property does not inherit the properties of its parent, due to the
fact that the initial value is set to transparent, the background
color of the child elements matches the background color of
the parent element.
background-color
Sets the value of the fields around the content of the element.
A field is the distance from the inner edge of an element's
frame to an imaginary rectangle bounding its contents
padding
Sets the amount of indentation from each edge of the element.
The indentation is the space from the border of the current
element to the inner border of its parent element
margin
Sets the distance between the borders of cells in the table.
border-spacing does not work when the border-collapse
property with the collapse value is set for the table.
border-spacing
Sets how to display borders around table cells. This property
plays a role when a frame is installed for the cells, then a
double-thickness line will be obtained at the junction of the
border-collapse cells.
Defines the position of the table header, which is set using the
<caption> tag, relative to the table itself. The caption-side
property displays the title before or after the table, and the text
alignment to the right or left is set via the text-align property.

caption-side
Sets the display of borders and background in the cell if it is
empty. When the border-collapse property with the collapse
value is added to the table at the same time, the empty-cells
empty-cells property is ignored.
The universal border property allows you to simultaneously set
the thickness, style and color of the border around the
border element.
A universal property that simultaneously sets the color, style,
and thickness of the outer border on all four sides of the
element. Unlike the line set via border, the outline property
does not affect the position of the block and its width.
outline
A multi-purpose property that defines how an element should
display be displayed in a document.
Determines on which side the element will be aligned, while
the other elements will flow around it from other sides. When
the value of the float property is none, the element is displayed
on the page as usual, while it is allowed that one line of the
flowing text can be on the same line as the element itself.

float
Sets which side of the element is prohibited from wrapping it
with other elements. If the element is wrapped using the float
property, then clear cancels its action for the specified sides.
clear
Sets the way the element is positioned relative to the browser
window or other objects on the web page.
position
The overflow property controls the display of the content of a
block element if it does not fit entirely and goes beyond the
overflow area of the specified dimensions.
Sets the radius of rounding of the corners of the frame. If the
frame is not set, then rounding also occurs with the
border-radius background.
Adds a shadow to the element. It is allowed to use several
shadows, specifying their parameters separated by commas,
when applying shadows, the first shadow in the list will be
box-shadow higher, the last one will be lower.
A gradient is a smooth transition from one color to another,
and there may be several colors themselves and transitions
between them. With the help of gradients, the most bizarre
web design effects are created, for example, pseudo-three-
dimensionality, glare, background, etc. Also, with a gradient,
the elements look more cute than plain ones.
linear-gradient
eebirakenduste Loomine (HTML, CSS)

Seletus

see on veebisaidi või veebirakenduse loomise protsess.

see on veebiarenduse haru ja teatud tüüpi disain, mille


ülesannete hulka kuulub veebisaitide või veebirakenduste
kasutajaliideste kujundamine.
dokument, mida saab brauseri vaataja abil avada ja vaadata.
Veebilehed sisaldavad teksti, graafikat, heli, videot,
animatsiooni, hüperlinke teistele lehtedele.
veebilehtede kogum, mis on ühendatud tähenduses ja
navigeerimisel (St hüperlinkidel klõpsates liigute ühelt lehelt
teisele).
võrguga ühendatud arvuti, mis salvestab veebilehti ja
veebisaite. Oma veebisaidi loomisel, nii et see oleks nähtav
kogu Internetis, peate saidi failid veebiserverisse kopeerima.
see on programm, mis on mõeldud veebi sirvimiseks.

see on rakenduse kliendiosa loomine.


Arendaja-arendaja tegeleb saidi malli paigutamise ja
kasutajaliidese loomisega.
veebirakenduse taustaprogrammi loomine.
Arendaja peab teadma serveripõhiseid programmeerimiskeeli
(register, register, register# ASP.NET.....); töötada andmetega:
see on veebilehtede
andmebaasid, moodustamise
kohtuvaidlused, protsess, kohtulike mallide
kohtuvaidlused.
loomine vastavalt saidi heakskiidetud kujunduspaigutusele.
Paigutusprotsess seisneb lehekoodide loomises, kasutades
Semantiline element kirjeldab
brauseritele arusaadavat selgelt selleregiooni,
märgistuskeelt, tähendust nii
regiooni ja
brauseri kui ka arendaja jaoks. Näited mitte-semantilistest
elementidest: < kohtuvaidlus > ja < kohtuvaidlus > - ei ütle
kasutajaliides,
selle sisu kohtaLihtsamalt
midagi. öeldes-saidi kujundus:
värvikombinatsioonid, fondid, ikoonid ja nupud.
"kasutaja kogemus". Lihtsamalt öeldes on see, kuidas
kasutaja liidesega suhtleb ja kui sait või rakendus on selle
jaoks selge ja mugav.
Element < kohtuvaidlus > on mõeldud brauseriaknas kuvatava
veebilehe (sisu) sisu salvestamiseks. Teave, mis tuleb
dokumendis kuvada, peaks asuma täpselt konteineri sees
Nende siltide
<kohtulik>. vahelteabe
Sellise on teave dokumendi
hulka kuuluvad kohta.
tekst, pildid, sildid,

Need sildid sisaldavad lehe nime, mis kuvatakse vaataja akna


raamis.
Sildid, mida kasutatakse lõikude esiletõstmiseks. Uus lõik
eraldatakse eelmisest alati tühja reaga.
Silt, mida kasutatakse teksti teisele reale mähkimiseks. Võib
kasutada ka graafika eraldamiseks tekstist vahedega.
Silt, mida kasutatakse teksti loogiliseks eraldamiseks
horisontaalse joonega.
Nende siltide vahel on eelvormindatud tekst. See kuvatakse
ekraanil tüübiga "kuller".
Esimese taseme pealkiri.

Sildid teksti (sõnade, tähtede) paksus kirjas esiletõstmiseks.


Sildid teksti (sõnade, tähtede) rõhutamiseks kaldkirjas, näiteks
animafilm.
Nende kahe sildi vahel asuv tekst on allajoonitud.

Sildid, mis näitavad nummerdatud loendi algust ja lõppu

Sildid, mis näitavad täpploendi algust ja lõppu.

Loendiüksus

Sildid tabeli lisamiseks KOHTUDOKUMENTI

tabeli nimi on parameeter kohtuvõim=kohtuvõim-joondus tabeli


kohal ja kohtuvõim = kohtuvõim - tabeli all.
Tabeli rida. Võib olla parameetrid BGCOLOR - taustavärv sees
string; ALIGN=LEFT, RIGHT, CENTER - viimine sees string;
VALIGN=TOP, BOTTOM, MIDDLE - vertikaalne joondus sees
Tabeliveeru.
tabeli rida. Võib olla parameetrid BGCOLOR - taustavärv
veeru all; ALIGN=LEFT, RIGHT, CENTER - viimine veergu;
VALIGN=TOP, BOTTOM, MIDDLE - vertikaalne joondus;
Veerupäis. Võib olla parameetrid
COLSPAN pikendades BGCOLOR
rakkude mitu veergu, -ROWSPAN
taustavärv -
nimega; ALIGN=LEFT, RIGHT, CENTER - viimine;
VALIGN=TOP, BOTTOM, MIDDLE - vertikaalne joondus;
graafilise
COLSPAN, pildi sisestamise
ROWSPAN käsk
- pikendades rakkude mitme veeru või

Silt < kohtuvaidlus> on kohtuvaidluste üks olulisi elemente ja


on mõeldud linkide loomiseks.
Element <tegutseja > on plokielement ja selle eesmärk on
esile tõsta dokumendi fragment, et muuta sisu välimust.
Element <kohtulik> on mõeldud dokumendi põhisisu jaoks.
Sisu peaks olema ainulaadne ja mitte sisaldama tüüpilisi
plokke nagu saidi päis, kelder, navigeerimine, külgriba,
otsinguvorm
Silt jne. > määrab saidi navigeerimise. Kui lehel on
< kohtuvaidlus
mitu lingiplokki, siis on tavaline, et prioriteetsed lingid
paigutatakse <kohtuvaidlustesse>.
Määratleb sisu küljel oleva ploki rubriikide, arhiivilinkide, siltide
ja muu teabe paigutamiseks. Sellist seadet nimetatakse
tavaliselt" külgribaks "või"külgribaks".

Määrab dokumendi jaotise, seda saab rakendada uudiste


ploki, kontaktteabe, tekstipeade, dialoogiboksi vahelehtede
jms jaoks. Lubatud on pesitseda üks silt < teema> teise sisse.

Silt < teema > määrab saidi sisu, näiteks uudised, artiklid,
ajaveebikirjed, foorum vms.
Silt < kohtualune> määrab saidi või jaotise "keldri", see võib
sisaldada autori nime, dokumendi kuupäeva, kontakt-ja
juriidilist teavet.
Kasutatakse mis tahes elementide, näiteks piltide ja nende
pealdiste rühmitamiseks.
Sisaldab sildi kirjeldust <teema>. Silt < teema > peab olema
rühma esimene või viimane element.
Silt < kohtuvaidlus > määrab vormi veebilehel. Vorm on
mõeldud andmete vahetamiseks kasutaja ja serveri vahel.

Silt < teema > on üks vormi mitmekülgsetest elementidest ja


võimaldab teil luua erinevaid liidese elemente ja pakkuda
kasutajakogemust. Peamiselt on mõeldud tekstikastide,
erinevate nuppude, raadionuppude ja märkeruutude
loomiseks.

Kui teil on küsimusi, võtke meiega ühendust aadressil <url>.

Väli < teema> on vormielement ala loomiseks, kuhu saab


sisestada mitu tekstirida. Erinevalt sildist <TNT> on tekstiväljal
lubatud teha reavahetusi, need salvestatakse andmete
serverisse saatmisel.

Element < tegusõna > on mõeldud vormi elementide


rühmitamiseks. Selline rühmitamine hõlbustab tööd vormidega,
mis sisaldavad suurt hulka andmeid.
Silt < Teema> rakendatakse vormielementide rühma päise
loomiseks, mis on määratletud sildiga < teema>. Elementide
rühma tähistatakse brauseris raami abil ja tekst, mis asub
konteineris <ant>, on sellesse kasti manustatud.

Silt < kohtualune> loob seose konkreetse sildi, milleks tekst


tavaliselt toimib, ja vormielemendi (<kohtualune>,
<kohtualune>, <kohtualune>) vahel.
Määrab fondi perekonna, mida kasutatakse sisu teksti
kujundamiseks. Fontide loend võib sisaldada ühte või mitut
komaga eraldatud nime. Kui fondi nimi sisaldab tühikuid,
näiteks kohtulikku, peaks see olema ühe-või topelt
jutumärkides.

Määrab elemendi fondi suuruse. Suurust saab määrata mitmel


viisil. Komplekt konstantide (xx-small, x-small, small, medium,
large, x-large, xx-large) määrab suurus, mida nimetatakse
absoluutseks. Tõsi on see, et need pole täiesti absoluutsed,
kuna need sõltuvad brauseri ja operatsioonisüsteemi
seadetest.

Määrab elemendi teksti värvi.


Määrab fondi küllastuse. Väärtus on seatud vahemikku 100
kuni 900 sammuga 100. Ülivalgel kujul, mida brauser suudab
kuvada, on väärtus 100 ja ülirasval 900. Tavaline fondinägu
(mis on vaikimisi seatud) on võrdne 400 — ga, tavaline paks
tekst väärtusega 700.
Määrab fondi tüübi — tavaline, kaldkiri või kaldus. Kui tekst on
kursiivis või kaldus, pöördub brauser süsteemi poole, et leida
sobiv font. Kui antud fonti ei leita, kasutab brauser soovitud
teksti jäljendamiseks spetsiaalset algoritmi. Tulemus ja
kvaliteet võivad osutuda ebarahuldavaks, eriti dokumendi
printimisel.

Lisab teksti kujunduse selle allajoonimise, läbikriipsutamise,


teksti kohal oleva joone ja vilkumise kujul. Korraga saab
rakendada rohkem kui ühte stiili, loetledes väärtused tühiku
kaudu.
Määrab, kuidas väiketähti tuleks esitada — jätta need
muutmata või muuta need kõik vähendatud suurusega
suurtähtedeks. Seda sümbolite muutmise meetodit
nimetatakse pealinnaks.
Kontrollib elemendi teksti teisendamist suurtähtedeks või
suurtähtedeks. Kui väärtus erineb määrusest, muudetakse
lähteteksti juhtumit.

Määrab teksti esiosa (reavahe), loendatakse fondi


lähtejoonest. Tavaolukorras sõltub ridade vaheline kaugus
fondi tüübist ja suurusest ning selle määrab brauser
automaatselt. Negatiivne reavahe väärtus pole lubatud.

Määrab teksti horisontaalse joonduse elemendi piires.

Määrab tekstiploki esimese rea taande suuruse (NT lõigu


<teema>jaoks). Mõju kõigile teistele ridadele ei ole. Esimese
rea serva loomiseks on lubatud negatiivne väärtus, kuid
peaksite kontrollima, et tekst ei ulatuks brauseriaknast
kaugemale.

Joondab üksuse vertikaalselt oma vanema, ümbritseva teksti


või tabeli lahtri suhtes.

Määrab elemendi tähemärkide vahelise intervalli. Brauserid


määravad tähemärkide vahekauguse tavaliselt fondi tüübi ja
tüübi, selle suuruse ja operatsioonisüsteemi sätete põhjal.

Määrab elemendi taustavärvi. Kuigi see omadus ei päri oma


vanema omadusi, on Algväärtuse läbipaistvaks muutmise tõttu
laste taustavärv sama mis vanema taustavärv.

Määrab elemendi sisu ümber olevate väljade väärtuse. Väli on


kaugus elemendi raami siseservast kujuteldava ristkülikuni,
mis piirab selle sisu.

Määrab taande suuruse elemendi igast servast. Taane on


ruum praeguse elemendi piirist selle vanema sisemise piirini
Määrab tabeli lahtripiiride vahelise kauguse. kohtuvaidleja ei
tööta juhul, kui tabelile on määratud kohtuvaidleja vara, millel
on kohtuvaidleja väärtus.

Määrab, kuidas tabeli lahtrite ümber piire kuvada. See omadus


mängib rolli, kui lahtritele on paigaldatud raam, siis saadakse
lahtrite ristumiskohas kahekordse paksusega joon.

Määrab tabeli päise asukoha, mis on antud sildiga < alent>,


tabeli enda suhtes. Kohtuvaidleja vara väljastab päise enne
või pärast tabelit ning teksti joondamine paremale või vasakule
määratakse kohtuvaidleja vara kaudu.

Määrab lahtris piiride ja tausta kuvamise, kui see on tühi. Kui


tabelisse lisatakse samaaegselt kohtuvaidluse-kohtuvaidluse
atribuut koos kohtuvaidluse väärtusega, eiratakse
kohtuvaidluse-kohtuvaidluse omadust.
Halduri universaalne omadus võimaldab samaaegselt määrata
elemendi ümber piiri paksuse, stiili ja värvi.

Universaalne omadus, mis määrab samaaegselt välimise piiri


värvi, stiili ja paksuse elemendi kõigil neljal küljel. Erinevalt
kohtuvaidluste kaudu antud joonest ei mõjuta kohtuvaidluste
vara ploki asukohta ja laiust.

Mitmeotstarbeline omadus, mis määrab, kuidas elementi


dokumendis näidata.
Määrab, millisel küljel element joondub, ülejäänud elemendid
voolavad selle ümber teistest külgedest. Kui atribuudi väärtus
on võrdne atribuudiga, väljastatakse element lehel nagu
tavaliselt, lubades, et üks voolujoonelise teksti rida võib olla
samal real kui element ise.

Määrab, kummal pool elementi on keelatud selle ümbritsemine


teiste elementidega. Kui elemendi ümbermõõt on määratud
kohtuliku vara abil, tühistab kohtuvaidlus selle tegevuse
nimetatud poolte jaoks.
Määrab elemendi positsioneerimise viisi brauseriakna või
muude veebilehe objektide suhtes.

Vara haldaja kontrollib plokielemendi sisu kuvamist, kui see ei


mahu täielikult ja ületab etteantud mõõtmetega ala.

Määrab raami nurkade ümardamise raadiuse. Kui raami pole


määratud, toimub ümardamine ka taustal.

Lisab elemendile varju. Lubatud on kasutada mitut varju,


näidates nende parameetrid komaga, varjude pealekandmisel
on loendi esimene Vari kõrgem, viimane allpool.
Gradient on sujuv üleminek ühelt värvilt teisele ning värve ise
ja nende vahel võib olla mitu üleminekut. Gradientide abil
luuakse veebidisaini kõige veidramad efektid, näiteks
pseudotrahm, pimestamine, taust jne.
Это процесс создания веб-сайта или веб-приложения.

Это отрасль веб-разработки и разновидность дизайна, в


задачи которой входит проектирование
пользовательских веб-интерфейсов для сайтов или веб-
Документ, который можно открыть и посмотреть с
приложений.
помощью программы просмотра браузера. Веб-страницы
содержат в себе текст, графику, звук, видео, анимацию,
Cовокупность
гиперссылки навеб-страниц, объединенных по смыслу и
другие страницы.
навигационно (т.е. щелкая по гиперссылкам, вы
переходите от одной страницы к другой).
Компьютер, подключенный к сети, на котором хранятся
веб-страницы и веб-сайты. Когда вы создадите свой сайт,
то чтобы он был виден всей сети Интернет, вы должны
Это программа,
скопировать которая
файлы предназначена
сайта на веб-сервер.для просмотра
веб -страниц.
это создание клиентской части приложения.
Front-end разработчик занимается версткой шаблона
сайта и созданием пользовательского интерфейса.
создание серверной части веб-приложения.
Back-end разработчик должен знать серверные языки
программирования (PHP, Java, C# ASP.NET, ….); работать
это процессбазы
с данными: формирования веб-страниц,
данных, JSON, XML. создание HTML-
шаблонов в соответствии с утвержденным дизайн-макетом
сайта. Процесс вёрстки заключается в создании кода
Семантический элемент
страниц при помощи четко описывает
понятного браузерамего значение
языка как
разметки,
для браузера, так и для разработчика. Примеры
не семантических элементов: <div> и <span> — ничего не
пользовательский интерфейс, проще говоря ―
говорит о его содержимом.
оформление сайта: сочетания цветов, шрифты, иконки и
кнопки.
«пользовательский опыт». Простыми словами, это то,
каким образом пользователь взаимодействует с
интерфейсом и насколько сайт или приложение для него
Элемент
понятны и<body> предназначен для хранения содержания
удобны.
веб-страницы (контента), отображаемого в окне браузера.
Информацию, которую следует выводить в документе,
Между
следуетэтими тэгами располагается
располагать именно внутри информация о
контейнера <body>. К
документе.
В этих тэгах заключается название странички, которое
будет выведено в рамке окна программы просмотра.
Тэги, служащие для выделения абзацев. Новый абзац
всегда отделяется от предыдущего пустой строкой.
Тэг, служащий для переноса текста на другую строку.
Может также служить для отделения графики от текста на
интервал.
Тэг, служащий для логического разделения текста
горизонтальной линией.
Между этими тэгами располагается предварительно
отформатированный текст. На экран он выводится
шрифтом типа "курьер".
Заголовок первого уровня.

Тэги для выделения текста (слов, букв) жирным шрифтом.


Тэги для выделения текста (слов, букв) курсивным
шрифтом, типа Italic.
Текст, расположенный между двумя этими тэгами, будет
подчеркнут.
Тэги, показывающие начало и конец нумерованного списка

Тэги, показывающие начало и конец маркированного


списка.
Элемент списка

Тэги для вставки таблицы в HTML документ

название таблицы, имеет параметр ALIGN=TOP -


выравнивание над таблицей и ALIGN=BOTTOM - под
таблицей.
Строчка таблицы. Может иметь параметры BGCOLOR -
цвет фона внутри строки; ALIGN=LEFT, RIGHT, CENTER -
выравнивание внутри строки; VALIGN=TOP, BOTTOM,
Столбец
MIDDLE -таблицы. Может
вертикальное иметь параметры
выравнивание BGCOLOR
внутри строки -
цвет фона под столбцом; ALIGN=LEFT, RIGHT, CENTER -
выравнивание внутри столбца; VALIGN=TOP, BOTTOM,
Заголовок столбца. Может
MIDDLE - вертикальное иметь параметры
выравнивание; BGCOLOR -
COLSPAN
цвет фона под названием; ALIGN=LEFT, RIGHT, CENTER -
выравнивание; VALIGN=TOP, BOTTOM, MIDDLE -
команда для вставки
вертикальное графического
выравнивание; изображения
COLSPAN, ROWSPAN -

Тег <a> является одним из важных элементов HTML и


предназначен для создания ссылок.
Элемент <div> является блочным элементом и
предназначен для выделения фрагмента документа с
целью изменения вида содержимого.
Элемент <main> предназначен для основного
содержимого документа. Содержимое должно быть
уникальным и не включать типовые блоки вроде шапки
сайта,
Тег подвала,
<nav> задаетнавигации,
навигациюбоковой панели,
по сайту. формы
Если на поиска
странице
несколько блоков ссылок, то в <nav> обычно помещают
приоритетные ссылки.
Определяет блок сбоку от контента для размещения
рубрик, ссылок на архив, меток и другой информации.
Такой блок, как правило, называется «сайдбар» или
«боковая панель».
Задаёт раздел документа, может применяться для блока
новостей, контактной информации, глав текста, вкладок в
диалоговом окне и др. Раздел обычно содержит заголовок.
Допускается вкладывать один тег <section> внутрь другого.

Тег <article> задает содержание сайта вроде новости,


статьи, записи блога, форума или др.
Тег <footer> задаёт «подвал» сайта или раздела, в нём
может располагаться имя автора, дата документа,
контактная и правовая информация.
Используется для группирования любых элементов,
например, изображений и подписей к ним.
Содержит описание для тега <figure>. Тег <figcaption>
должен быть первым или последним элементом в группе.
Тег <form> устанавливает форму на веб-странице. Форма
предназначена для обмена данными между
пользователем и сервером.
Тег <input> является одним из разносторонних элементов
формы и позволяет создавать разные элементы
интерфейса и обеспечить взаимодействие с
пользователем. Главным образом <input> предназначен
для создания текстовых полей, различных кнопок,
переключателей и флажков.

Тег <select> позволяет создать элемент интерфейса в


виде раскрывающегося списка, а также список с одним или
множественным выбором, как показано далее.

Поле <textarea> представляет собой элемент формы для


создания области, в которую можно вводить несколько
строк текста. В отличие от тега <input> в текстовом поле
допустимо делать переносы строк, они сохраняются при
отправке данных на сервер.
Элемент <fieldset> предназначен для группирования
элементов формы. Такая группировка облегчает работу с
формами, содержащими большое число данных.
Тег <legend> применяется для создания заголовка группы
элементов формы, которая определяется с помощью тега
<fieldset>. Группа элементов обозначается в браузере с
помощью рамки, а текст, который располагается внутри
контейнера <legend>, встраивается в эту рамку.

Тег <label> устанавливает связь между определенной


меткой, в качестве которой обычно выступает текст, и
элементом формы (<input>, <select>, <textarea>).
Устанавливает семейство шрифта, которое будет
использоваться для оформления текста содержимого.
Список шрифтов может включать одно или несколько
названий, разделенных запятой. Если в имени шрифта
содержатся пробелы, например, Trebuchet MS, оно должно
заключаться в одинарные или двойные кавычки.

Определяет размер шрифта элемента. Размер может


быть установлен несколькими способами. Набор констант
(xx-small, x-small, small, medium, large, x-large, xx-large)
задает размер, который называется абсолютным. По
правде говоря, они не совсем абсолютны, поскольку
зависят от настроек браузера и операционной системы.

Определяет цвет текста элемента.


Устанавливает насыщенность шрифта. Значение
устанавливается от 100 до 900 с шагом 100. Сверхсветлое
начертание, которое может отобразить браузер, имеет
значение 100, а сверхжирное — 900. Нормальное
начертание шрифта (которое установлено по умолчанию)
эквивалентно 400, стандартный полужирный текст —
значению 700.
Определяет начертание шрифта — обычное, курсивное
или наклонное. Когда для текста установлено курсивное
или наклонное начертание, браузер обращается к системе
для поиска подходящего шрифта. Если заданный шрифт
не найден, браузер использует специальный алгоритм для
имитации нужного вида текста. Результат и качество при
этом могут получиться неудовлетворительными, особенно
при печати документа.

Добавляет оформление текста в виде его подчеркивания,


перечеркивания, линии над текстом и мигания.
Одновременно можно применить более одного стиля,
перечисляя значения через пробел.
Определяет, как нужно представлять строчные буквы —
оставить их без модификаций или делать их все
прописными уменьшенного размера. Такой способ
изменения символов называется капителью..
Управляет преобразованием текста элемента в заглавные
или прописные символы. Когда значение отлично от none,
регистр исходного текста будет изменен.

Устанавливает интерлиньяж (межстрочный интервал)


текста, отсчет ведется от базовой линии шрифта. При
обычных обстоятельствах расстояние между строками
зависит от вида и размера шрифта и определяется
браузером автоматически. Отрицательное значение
межстрочного расстояния не допускается.

Определяет горизонтальное выравнивание текста в


пределах элемента..
Устанавливает величину отступа первой строки блока
текста (например, для абзаца <p>). Воздействия на все
остальные строки не оказывается. Допускается
отрицательное значение для создания выступа первой
строки, но следует проверить, чтобы текст не выходил за
пределы окна браузера.

Выравнивает элемент по вертикали относительно своего


родителя, окружающего текста или ячейки таблицы.

Определяет интервал между символами в пределах


элемента. Браузеры обычно устанавливают расстояние
между символами, исходя из типа и вида шрифта, его
размеров и настроек операционной системы.
Определяет цвет фона элемента. Хотя это свойство не
наследует свойства своего родителя, из-за того, что
начальное значение устанавливается прозрачным, цвет
фона дочерних элементов совпадает с цветом фона
родительского элемента.
Устанавливает значение полей вокруг содержимого
элемента. Полем называется расстояние от внутреннего
края рамки элемента до воображаемого прямоугольника,
ограничивающего его содержимое
Устанавливает величину отступа от каждого края
элемента. Отступом является пространство от границы
текущего элемента до внутренней границы его
родительского элемента
Задает расстояние между границами ячеек в таблице.
border-spacing не работает в случае, когда для таблицы
установлено свойство border-collapse со значением
collapse.
Устанавливает, как отображать границы вокруг ячеек
таблицы. Это свойство играет роль, когда для ячеек
установлена рамка, тогда в месте стыка ячеек получится
линия двойной толщины.
Определяет положение заголовка таблицы, который
задается с помощью тега <caption>, относительно самой
таблицы. Свойство caption-side выводит заголовок до или
после таблицы, а выравнивание текста по правому или
левому краю устанавливается через свойство text-align.

Задает отображение границ и фона в ячейке, если она


пустая. При одновременном добавлении к таблице
свойства border-collapse со значением collapse, свойство
empty-cells игнорируется.
Универсальное свойство border позволяет одновременно
установить толщину, стиль и цвет границы вокруг
элемента.
Универсальное свойство, одновременно
устанавливающее цвет, стиль и толщину внешней границы
на всех четырех сторонах элемента. В отличие от линии,
задаваемой через border, свойство outline не влияет на
положение блока и его ширину.
Многоцелевое свойство, которое определяет, как элемент
должен быть показан в документе.
Определяет, по какой стороне будет выравниваться
элемент, при этом остальные элементы будут обтекать его
с других сторон. Когда значение свойства float равно none,
элемент выводится на странице как обычно, при этом
допускается, что одна строка обтекающего текста может
быть на той же линии, что и сам элемент.

Устанавливает, с какой стороны элемента запрещено его


обтекание другими элементами. Если задано обтекание
элемента с помощью свойства float, то clear отменяет его
действие для указанных сторон.
Устанавливает способ позиционирования элемента
относительно окна браузера или других объектов на веб-
странице.
Свойство overflow управляет отображением содержания
блочного элемента, если оно целиком не помещается и
выходит за область заданных размеров.
Устанавливает радиус скругления уголков рамки. Если
рамка не задана, то скругление также происходит и с
фоном.
Добавляет тень к элементу. Допускается использовать
несколько теней, указывая их параметры через запятую,
при наложении теней первая тень в списке будет выше,
последняя ниже.
Градиентом называют плавный переход от одного цвета к
другому, причём самих цветов и переходов между ними
может быть несколько. С помощью градиентов создаются
самые причудливые эффекты веб-дизайна, например,
псевдотрёхмерность, блики, фон и др. Также с градиентом
элементы смотрятся более симпатично, чем однотонные.

You might also like