Въпрос към урок: Ефекти върху слоевете от курс: Photoshop Web Design

Защо не направите курс само за команди и управление на html?

Фотошоп Fastweb Photoshop Уеб дизайн

Здравейте! Като човек, който никога не се е занимавал с команди, останах силно притеснена от това, че не разбирам кое какво е. Защо не направите курс, който следва ясно стъпките в писането на команди, каква е логиката, кое какво означава, кога се използва и т.н  Смятам, че полезността и успеваемостта би била по-голяма. Поздрави

Здравей. В тази част на курса идеята не е да се разбира HTML-а из основи. Той е обяснен принципно в предпоследния модул, както и в някои от въпросите към уроците. Също така е възможно и да се направи курс по HTML самостоятелно с повече фокус върху темата.


Принципно няма нищо сложно. Първото нещо което трябва да схванеш, е че HTML-а не е език за програмиране. Няма команди или процедури. Това е език за структуриране на съдържание с цел унифицирана интерпретация от компютърен алгоритъм.
Например, ако ни дадат задача, да напишем в един текстов файл абсолютно минималистично данните (Име, години, град, снимки). То без да ползваме език за маркиране, щяхме да направим така:

Иван, 24, София, img1.jpg, img2.jpg
Петър, 27, Бургас, img12.jpg, img13.jpg, img14.jpg

Ако искаме обаче това да се разбира от компютър, то първо задаваме по коя схема ще маркираме. Това може да е BML, (Business Markup Language), PML ( Person Markup Language), HTML ( Hyper Text Markup Language). Решаваме, че това ще е PML (чисто теоретично) В него има елементите <person> <picture> и още много други. Те са зададени в дефиницията му.
Така след като прочетем дефиницията на PML, ще направим файла си така и той ще бъде разбран от софтуера който работи с такива файлове.

<person name="Иван" city="София" age="24">
     <picture src="img1.jpg" >
     <picture src="img2.jpg" >
</person>

<person name="Петър" city="Бургас" age="27">
     <picture src="img12.jpg" >
     <picture src="img13.jpg" >
     <picture src="img14.jpg" >
</person>

Сигурно се чудиш, защо <picture> няма затварящ таг, както е <person></person>. Някои тагове са така, за тях няма смисъл да бъдат затваряни, тъй като поставят един елемент, който не може да съдържа други елементи в себе си. Като например <br> - за нов ред <img> - картинка <hr> - хоризонтална черта

След което решаваме да направим същия лист в HTML. Там обаче нямаме тагове за <person> или <picture>, за това ще ползваме тези които имаме според дефиницията му. В 95% от случаите се ползват <div><span><img><b><i><em><p><br><a>

<div class="person">
    <div class="name">Иван</div>
    <div class="age">24</div>
    <div class="city">София</div>
    <div class="pictures">
          <img src="img1.jpg">
          <img src="img2.jpg">
    </div>
</div>

<div class="person">
    <div class="name">Петър</div>
    <div class="age">27</div>
    <div class="city">Бургас</div>
    <div class="pictures">
         <img src="img12.jpg">
         <img src="img13.jpg">
         <img src="img14.jpg">
    </div>
</div>

Сега може да визуализираме този HTML както си поискаме. Така зададен HTML-а може да бъде стилизиран по всички възможни за HTML начини. Това обаче, се прави със CSS (Cascading Style Sheets), което е обяснено в предпоследния модул също. С едно-две CSS правила можем да сложим картинките на един ред или пък да са едно върху друго. Можем да окажем размера на фонта на името, точната позиция на годините, града. Да сложим всичко върху една картинка от Photoshop или пък да му сложим плътен цвят и рамка.
Всъщност кода на HTML-а се вижда когато махнем CSS, тоест всичко което е в 
style="...." и
<STYLE>....</STYLE> и
<LINK type="stylesheet">

След това трябва да махнем всичкия JavaScript който пък се намира в <SCRIPT>...</SCRIPT>

Тук ще свържа няколко теми от форума даващи още информация:
https://aula.bg/question/7846
https://aula.bg/question/7913

Благодаря Поизясниха ми се нещата за сега


Вашият отговор

Научи компютърните програми онлайн от топ експертите на България
Регистрацията в АУЛА ви дава:
  • 20 безплатни урока
  • Трикове и тънкости за софтуера
  • Отговори на вашите въпроси
  • Регистрация