HTML и CSS (ръчно)

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Какво представлява HTML? HTML e език за маркиране.
Пълното му име е hyper text markup language.
Какво значи език за маркиране? Нека отворя този файл.
Първо горе в браузъра и след това в notepad.
Нека сложа един текст.
Избирам Save.
И F5 горе.
Сега ще кажа на браузъра отгоре, който е Google Chrome, Да интерпретира моят html, Като bold- a го направи bold, затова ще го маркирам с тага .
Отварящ таг, и затваряш таг .
Давам Save и F5.
Нека да го направим това и за Italic.
"i" е тага за Italic.
Tрябва да го отворя, там където започва italic текста и да го затворя там където текста свърша.
Затварянето става с тази наклонена черта, която е отляво на shift.
Давам save.
Eдна страница обикновено е съставена от няколко различни технологии.
Три от основните са html което езика за маркиране.
Втората е css, което значи Cascading Style sheets и това е езика за стилове, с който може да оцветяваме, променяме големина на текст, да поставям отстояние, фонове и други стилови елементи.
Tретата технология е javascript.
Всичките тези три технологии може да са вътре в един файл, но това не ги прави html.
Напримерно в този файл може да сложа Script.
Html -a само маркира, че там има скрит, това което е вътре в Script вече е javascript.
Например.
Javascript - a ми даде alert Box с "X".
T.
e.
това е html, a всичко вътре е javascript.
По същия начин имаме и Style, който се слага горе, в Head таг -а.
Всичко, което е вътре в този style е css.
Както виждаш фона стана черен, защото това е hex кода на черно И съм задал, да го сложи на body.
Не се стряскайте от това нещо.
Просто исках да сегментирам html-а от javascript и CSS.
В HTML няма абсолютно никаква логика.
Това е език за маркиране.
В него няма нищо сложно, имате различни елементи и искате да ги маркирате.
Нека да изтрия тези тагове отдолу.
Сега ще отворя Photoshop, за да си направя mockup, на някакъв дизайн и след това да го направим същия в html.
Създавам си нов файл с Preset: Web.
В случая няма никкаво значение какъв е preset -a.
Сега тук ще сложа един текст.
Тук ще сложа едно каре.
В него ще сложа също текст.
Накрая ще сложа и един параграф текст.
Този параграф е доста разместен.
Сега искам това нещо да го пренеса и да го направя на html.
Единият вариант е както ви показвах.
Да направите цялото това нещо на картинка и да го ескпортирате през Photoshop,
но в този модул разглеждаме html и искаме да се научим на Html, затова ще го направим на ръка.
Ще направим тези елементи да са html, а не цялото нещо да е картинка.
Тук е добро място да обясним всъщност, Защо го правим изобщо правим това нещо? Картинката ни ще е най-вероятно 3, 4 kB, защo трябва да го правиме на html.
Първо, когато го направим на html, ще можем да направим да речем до 100 страници много бързо.
Вместо да правим по 100 файла на Фотошоп и да експортваме картинки.
Имаме един шаблонен html файл и след като го направи да работи със стиловете можем да влезнем вътре и да променим текстовете.
Ще изглежда по същия начин само че с различни текстове.
Т.
е.
първата причина е бързина при създаването на много страници.
Втората причинаа е, че страниците ще влезна в търсачките директно.
Понеже търсачките не мога да разберат какво има в една картинка, като текст.
Но могат да видят в html, когато той е текст.
Това не ми би трябвало да е основна причина.
Понеже винаги в тези страници, които направихме с фотошоп с export като картинки, Може добавите същият текст, най-отдолу скрит, така че да могат търсачките да го виждат,а хората да виждат картинките.
Така че и посредством двата типа html и картинки търсачките ще могат да индексират съдържанието ви.
Разбира се добавянето на текст под експорта от фотошоп, може да отнеме време.
НО със сигурно създаването с html ще отнеме доста повече време.
Третата причина, заради която правим html е, че може използваме системи.
Например wordpress.
Системи, които са разработени от програмисти и улесняват създаването на огромни сайтове
Разбира се, ако нямате огромен сайт, няма да ви трябва.
Нека се върнем в html - a.
Ще го отворя в страни и да напишем същите неща.
Мy title Hello Останалото не е от значение.
Сега първо трябва да маркираме тези три елемента, които направихме.
Имаме този елемент тук,
"Мy title" след това имаме елемента "Hello", и след това имаме текст.
Маркирам ги с
.
Маркирам ги с
.
Да видим, какво се получи! Добре съм ги маркирал, но нямат никакъв стил и неприличат това на задния фон.
Как ще сложа стил? Първо трябва да сложа Style таг-а.
С него мога да избирам по ID например или клас, eлементи и да ги стилизирам.
Сега ще ви покажа как става по следния начин - на ръка! Пък след това ще ти покажа как може да стане с style wise-a.
Първо за да мога да адресирам My title трябва да му сложа или клас или ID, т.
e.
Kакво имам предвид?
Първо за да мога да адресирам My title трябва да му сложа или клас или ID, т.
e.
Kакво имам предвид?
ID -то се слага по този начин и се адресира по този начин с # {}.
Всичко между тези две скоби сa правила за стил.
Например: Color
Избирам Save.
Цвета се промени на червен.
Този код е за червен цвят.
Как се адресира с клас? Класа може да е каквото и да е, т.
е може да пишем тук: "проба"
Както и ID-то може да е каквото и да е, но не трябва да има отстояние.
Например така.
Адресирането на класове става по този начин с точка, "проба".
Слагам код за зелено.
Проблема, когато адресирам с ID, вместо с клас е, че може да имаме само един елемент, който е с ID titlе.
Това е правилото! ID -тата трябва да са уникални.
Следователно, ако копираме тук, и направим няколко title -a.
ще трябва да си ги кръстим, едно-две и да копираме стиловете.
1 2 По този начин html -a ще е правилен.
Затова е измислен класа.
Може да имаме колкото си искаме елементи Hello, с клас проба и няма да трябва да ги наименоваме проба 1 проба 2 и 3 и да правиме стил за всеки от тях.
За това изтривам това, което направихме погрешно.
Нека да се върнем към преобразуването на този html към този mockup.
Затова ще изтрия този стил и ID -то, и ще сложа клас на негово място.
Класът ще наименовам "title".
Следващия клас ще го наименовам "subtitle".
И третия да бъде е "description".
Тези неща си ги наименоваме ние, т.
е.
не са ключови думи, може да изберете каквито искате имена.
Сега ще използвам разни правила, които най-вероятно не знаете.
Не се стряскайте от тях, ще ги научим в друг урок.
Вижте тук за какво става въпрос.
Ще взема този цвят от тук.
Отивам долу за да взема цвета.
В Color picker-a имаме hex цвета.
Влизам в текстовия редактор и давам Paste.
Като пред тях трябва да има #.
Да видим какво стана? Цвета се оправи.
На втория subtitle слагаме background color, цветът е същия както при title-а, така че го слагам директно.
След което имаме и Description.
За да взема неговият цвят трябва да направя zoom.
Мога и да не правя zoom, ами да го взема оттук като селектирам текста.
Color е за текстов цвят.
Color е за текстов цвят.
Почти не се вижда, защото е много тъмен.
"Hello" имаше същия цвят.
Разделителя за тези CSS правила е точка и запетая.
Избирам F5.
Разликата е в големините.
Затова ще сложа fond-size, следващото правило.
"Font size" 25 пиксела например, мисля че е толкова някъде.
На следващия ще сложа font size 14 пиксела.
и тук се сложа font size 10 пискела.
Сега понеже съм направил zoom с Ctrl и ми е прекалено голямо, ще трябва да отида на 100%.
Това ще го видя оттук.
Това в момента е 100%.
Това означава, че съм доста далеч от истината.
И тук ще трябва да го направя 100%.
Добре сега вече го направих на 100%.
Мога да експериментирам.
50.
25.
и 13 пиксела Някъде там трябва да са като стойности.
Default font тук е, Times New Roman, докато тук има нещо което прилича на Arial или Verdana.
Затова единият вариант e да сложа тук font family Verdana и да копирам нa всичките три правила.
Tук.
Tук.
Tук.
Сега зебележете, когато избера F5 ще се промени шрифта.
Другия вариант е да избера всички елементи, или всички div -ове с това правило, и да им сложа font Verdana, като това сработи по същия начин.
За отстоянията от текста ще сложа padding.
Като първият padding e отгоре, 15 пиксела, след това отдясно, отдолу и отляво.
Мисля че тук шрифта прилича на Bold, затова ще му сложа font-weight: bold.
Горният също изгледа, че е Bold.
Това в Title, ще го копирам.
При title -a имаме отстояние от долната кутийка, затова ще го направя с Margin.
Ще сложа отгоре 10 пиксела отдясно 10 пиксела отдолу 10 отляво няма да сложа нищо.
Сега се получи малко по-правилно.
Description -a също има Margin.
10 пиксела отгоре и 10 пиксел в дясно нула пиксела от дясно, 10 пиксела отдолу и нула пиксела отляво.
Сега обаче когато премествам моята страница, тя се разтегля от край до край.
Докато тук имаме го имаме фиксирано, някъде по средата на страницата.
Затова цялото това нещо тук , трябва да го сложим в един div.
div class , ще го наименовам "shell" Ще го затворя, в края.
Т.
е.
всичките тези три контейнера с класове title, subscription, description ще се намират вътре в този shell.
Виждате, когато натисна тук, notepad ще ми покаже къде е краят на този div.
Това го правим за да мога да обхвана целия този shell с css правило и да му кажа: width: 500 пиксела Давам refresh тук и ще видите всички елементи вътре придобиват дължината 500 пиксела, защото са в контейнер който е с 500 пиксела.
Другото което трябва да направя е да го преместя в центъра Затова ще му сложа margin Auto.
Избирам Save.
Refresh Дизайна се получи почти същия.
разбира се шрифтовете няма да са същите.
понеже във Фотошоп имаме хиляди шрифтове от които може да избираме.
Докато в html трябва да си караме ръчно, което е нещо като плъгини към страницата.
Така е малко по-сложно.
Основните шрифтове, които може да ползваме директно в html са Times new Roman, Verdana, Arial и още няколко.
В следващия урок си направим всичко показно тук, по ръчния начин, ще го направим с програмата Style wiser.

Въпроси и отговори

  • Милен Григоров:

    Здравейте,
    различните елементи от HTML са с различни свойства.
    Има блокови и инлайн елементи:
    Блоковите елементи заемат целият ред и новият елемент идва на следващият ред, както е в твоят случай.
    Инлайн елементите заемат само толкова колкото им е нужно.
    Има много тънкости относно елементите, като пример на инлайн елемент не може да зададеш широчина и височина, защото той заема толкова колкото е неговото съдържание.
    Решението на Вашият проблем може да бъде следното:
    В CSS свойствата на ID-то или класа на елемента Ви му задайте:
    #myElement(ако е ID, . самоточка ако е клас ){
    display:inline-block;
    padding:15px; - Това е равносилно на - padding: 15px 15px 15px 15px;}

    инж. Юлия Петрова Савова:

    Благодаря за отговора.

    Diana:

    За по-бързо наместване на браузъра да е на 100% използвайте CTRL+0 :)

    SeRiousLy:

    Пробвай да сложиш в head-a . Пример:

  • Защо така?

    Даниела:

    Защо ми излизат знаци, вместо написаното от мен?

    Даниела:

    Написах го на английски и се оправи, но това означава ли че трябва да се промени някоя настройка, за да може и на български?

    Краси Кръстев:

    Здравей, да трябва отиди в регионалните настройки на компютъра си и настрой в раздела Admin. ( change system local ) да бъде на български.

    Следвай стъпките от снимка 1 за да промениш тази настройка.

    Снимка_1

    най - вероятно е от това.

    Може да погледнеш и тази тема тук :

    Отваряне през Notepad ще ти е от полезна.