Пятница , 29 Март 2024
ДомойПубликацииновичкам в html

новичкам в html

новичкам: несколько простых приёмов для php

людей, впервые начавших изучать html, можно условно разделить на 2 группы: те, кто занялся «программированием» только что (а ведь многие действительно считают, что на html нужно программировать), и те, кто программирует софт, но решил, допустим, сделать себе небольшую страничку в интернете. и в данном случае проще будет новичкам, т. к. они воспринимают принцип работы как должное и никаких проблем с переосмыслением у них не возникает.

зато у тех, кто ранее писа́л под веб (на php), возникают проблемы при необходимости что-то написать для ос. основной, пожалуй, камень преткновения — попытка что-то вывести в окно. в php с этим проблем нет, а вот при работе, допустим, с дельфи возникает проблема типизации переменной (переменную целого типа нельзя явно вывести на экран; её требуется предварительно преобразовать в строковое представление). мне один раз так и заявили: дельфи говно, в php я вывожу значение на экран, а тут вообще фигня какая-то.

html — это язык гипертекстовой разметки

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

выглядит <em>это</em> так
выглядит это так

верхняя строка содержит необходимый «код», нижняя — результат работы. получается, чистый html в достаточном уровне можно выучить за пару дней (просто запомнив основные теги). с любым, даже самым простым, языком программирования такой фокус не пройдёт.

html — это не программа под windows (linux, mac и т. д.)

момент вызывает непонимание у программистов, которые ранее занимались написанием софта (это не значит, что программисты плохие!). здесь кроется отличие взаимодействия программного обеспечения с операционной системой и браузера/пользователя с сайтом: страница со всем содержимым грузится не скопом, а частями (программу же можно скомпоновать в единый файл). это значит, что сначала будет загружен html(xhtml, wml, и т. д.; не важно)-документ, затем подгружаются стили (css), скрипты (javascript), изображения и т. д.

на каждую единицу информации браузер формирует запрос документа (опять же: jpg, css, javascript и т. д.) на сервер. таким-образом, если требуется на странице отобразить картинку, это делается явно (посредством тега img) или косвенно (css, javascript, flash). явная загрузка выглядит так:

<img alt="текст если картинка не отображается" src="/путь/image.jpg">

браузер, встретив такую конструкцию, сформирует специальный запрос на сервер, загрузит изображение и отобразит его на странице.

что за странный адрес у аттрибута src тега img

адреса можно разделить на 3 типа:

  • полный — используя этот тип адреса можно «заставить» браузер отобразить страницу даже если её кто-то сохранил себе на диск. полный адрес обязательно содержит имя домена и имеет такой вид: http://site.ru/index.html;
  • абсолютный — адрес начинается со слеша / и «отсчитывается» от корня сайта (как в linux). таким образом очень удобно из любого места давать ссылки, например, на картинки, которые хранятся в одном определённом месте;
  • относительный — путь отсчитывается от текущей диретории.

возьмём простой пример. имеем сайт site.ru; все изображения хранятся в директории http://site.ru/images/, мы просматриваем статьи в каталоге http://site.ru/articles/index.html, в которой есть подкаталог с именем photos, где располагаются фото для статей. если в тексте статьи требуется использовать изображение, то ссылка может быть такой:

<img alt="лого" src="http://site.ru/images/logo.jpg">
<img alt="лого" src="/images/logo.jpg">
<img alt="лого" src="../images/logo.jpg">

в первом случае применяется полный адрес, во втором — абсолютный, в третьем — относительный. две точки означают буквалоно следующее «подняться на 1 уровень». кто-то может быть вспомнит консольную команду cd .., которая изменяет текущую директорию на родительскую.

но из примера выше неясно, чем же относительный путь может быть удобен. проиллюстрируем это, указав путь к директории с фото:

<img alt="лого" src="http://site.ru/articles/photos/photo1.jpg">
<img alt="лого" src="/articles/photos/photo1.jpg">
<img alt="лого" src="photos/photo1.jpg">

уже на этом варианте видно, что адрес значительно упростился. а дело в том, что если мы находимся сейчас в директории http://site.ru/articles/, браузер поймёт, что относительный путь присоединяется к абсолютному (точнее, к каталогу, в котором мы сейчас находится) и автоматически сформирует корректное значение. но это ещё не всё! если когда-нибудь возникнет необходимость перенести папку articles со всем содержимым в папку press, то при использовании относительных адресов ничего не придётся менять. т. е., находясь на странице http://site.ru/press/articles/index.html, пути будут такими:

<img alt="лого" src="http://site.ru/press/articles/photos/photo1.jpg">
<img alt="лого" src="/press/articles/photos/photo1.jpg">
<img alt="лого" src="photos/photo1.jpg">

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

но относительные ссылки не лишены некоторого коварства. так, 2 адреса могут функционировать совершенно одинаково:

http://site.ru/articles
http://site.ru/articles/

всё отличие в концевом слеше. относительный путь к фото (photos/photo1.jpg) для первого варианта будет развёрнут в такой полный:

http://site.ru/photos/photo1.jpg

а для второго:

http://site.ru/articles/photos/photo1.jpg

браузер не знает и знать не может, что за элемент articles: файл или директория. поэтому считает, что относительный путь присовокупляется к последнему слешу (т. е. отбрасывается всё содержимое правее последнего слеша / и к нему добавляется относительный путь, указанный, в данном случае, в аттрибуте src).

к аттрибутам прочих тегов (href для тега <a>, src для тега <script> и т. д.) применяются такие же правила.

html не содержит (и не должен!) средств программирования

поэтому не нужно пытаться искать теги, с помощью которых можно ввести переменную, а затем проделать над ней какие-то действия (тег <var> нужен совсем не для этого). такие задачи решаются с помощью javascript.

html настолько туп, насколько и гениален

буквально это означает следующее: html до безобразия прост. он содержит строго определённый набор тегов, и сверх того, что они (теги) предоставляют, ничего не может. не нужно думать, что с помощью чистого html можно создать сайт, аналогичный vkontakte. увы, тут уже без css, javascript и грубокого понимания принципов работы сайтов не обойтись.

что ещё нужно знать о html

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

и это всё?

если вопрос касается статьи, то да. но для Вас, надеюсь, всё только начинается.

Рейтинг: 0

Автор публикации

2 070
не в сети 11 месяцев

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (Оценок пока нет)
Загрузка...

Оставить комментарий

Политика конфиденциальности

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

Принять