|
Урок по кодингу на HTML #1. By Ex3mDM.
| |
| Ex3mDM | Дата: Понедельник, 14 Ноября 2011, 20:43 | Сообщение # 1 |
|
участник
Сейчас нет на сайте
| Привет всем! Я расскажу как создать шаблон для будущего сайта, сразу скажу что мой компьютер сгорел и я пишу весь код по памяти с телефона, и так, приступим. 
Мы создаем директорию, в которой будут храниться файлы, картинки, документы и т.п. У меня это будет C://MySite/.
Давайте создадим первый файл - index.html. Вы наверно подумали, что это уже HTML - Документ, но я вас огорчу, пока это обычный текстовый файл. Чтобы файл стал HTML, нужно в самом его начале прописать данную строчку:
Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Теперь это страничка, но она ничего не делает. Сейчас мы это исправим.
Давайте напишем вот этот код и я объясню как он работает:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD> <TITLE>Это заголовок</TITLE></HEAD>
<BODY>Это тело сайта</BODY>
</HTML>
Теги <HTML> - пишутся в начале и конце файла, они обозначают начало и конец чтения.
Теги <HEAD> - всегда пишутся после тега <HTML>, в нем пишется заголовок сайта, который заключен в теги <TITLE>, разные инклюды, но это мы разберем чуть позже.
Теги <TITLE> - в них размещается заголовок сайта(название вкладки).
Теги <BODY> - это то, что отображается на странице, можно сказать, что отсюда начинается рендинг страницы.
Данные теги всегда закрываются слешем, перед их названием.
После того, как вы напишете этот код, можно просмотреть, то что у нас получилось, создав новую вкладку в браузере и перенеся туда наш документ.
Ну что, давайте продолжать.
Давайте напишем теперь уже реальную структуру страницы.
Вот код, для начала напишем его, после я объясню:
Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Это заголовок</TITLE> </HEAD> <BODY> <DIV align="left"> <TABLE border="0" height=100% width=100%> <TD> <TR width="130"> Это менюшка. </TR> <TR width="600"> Это центральная часть страницы. </TR> <TR width="130"> Местечко для рекламы. </TR> </TD> </TABLE> </DIV> </BODY> </HTML>
В начале мы видим тоже, что и в прошлом примере, но в тегах <BODY></BODY> мы видим уже намного больше кода, чем в прошлом примере.
Ну, давайте разберем код.
В нем появились новые теги:
<DIV></DIV> - это очень удобный контейнер объектов, которым можно манипулировать. Например - при нажатии на какую-либо кнопку - появлялось меню, но это мы разберем позже. Ее параметры мы рассмотрим тоже чуть позже, скажу только, что align(выравнивание) может быть right, center, left.
<TABLE></TABLE> - думаю, название говорит само за себя. Параметры рассмотрим позже, объясню только то, что я написал. Параметр border(рамка, которая обрамляет таблицу), ее размер зависит от значения, которое вы напишите, 0 - рамка исчезает. Параметр width(ширина), размер страницы по ширине. Параметр height(высота), размер страницы по высоте. 100% - растянуть по ширине и высоте экрана.
<TD></TD> - создает ячейку с данными, я здесь ничего не пишу, т.к. и не надо.
<TR></TR> - создает новый ряд ячеек таблицы, я использую этот тег очень часто, но объясню это позже. Параметр width(ширина) задает ширину ячейки.
На этом все, с вами был Ex3mDM.
В следующем уроке - объясню как оптимизировать код страницы, расскажу про все параметры тегов.
Спасибо всем за внимание, удачи в программировании!
Второй урок => http://gcup.ru/forum/56-18641-1
UPD: подредактировал, добавил ссылку на второй урок.
Сообщение отредактировал Ex3mDM - Вторник, 15 Ноября 2011, 17:32 |
|
|
| |
| Duskly | Дата: Понедельник, 14 Ноября 2011, 21:02 | Сообщение # 2 |
Rush Games
Сейчас нет на сайте
| прикольно, давай дальше и по больше информации
Разрабатываеться:
флеш игра для соц. Сетей (Бои друзей) - временное название!
3д игра (пока без названия)
|
|
|
| |
| Revolver_45 | Дата: Понедельник, 14 Ноября 2011, 21:05 | Сообщение # 3 |
почетный гость
Сейчас нет на сайте
| Quote (Ex3mDM) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
тебе стоит пояснить людям для чего нужна (или не нужна) эта строчка, и что она может отличаться.
rtytyrtyr
Сообщение отредактировал Revolver_45 - Понедельник, 14 Ноября 2011, 21:10 |
|
|
| |
| FeuVert | Дата: Понедельник, 14 Ноября 2011, 21:06 | Сообщение # 4 |
был не раз
Сейчас нет на сайте
| Вообще то не в тему,хотя интересно
|
|
|
| |
| InMod | Дата: Понедельник, 14 Ноября 2011, 21:08 | Сообщение # 5 |
был не раз
Сейчас нет на сайте
| Интересно, но ограничено. DOCTYPE не особо разобрал, распиши все, укажи какие с использованием устаревших тегов, а какие без них используются. Например форматы Transitional, Strict, Frameset ну и т.д. Вы описали несколько тегов для body, распишите пожалуйста "настройку" head. И то как можно применять meta.
Очень хорошо, продолжайте! 
Сообщение отредактировал InMod - Понедельник, 14 Ноября 2011, 21:14 |
|
|
| |
| Ex3mDM | Дата: Понедельник, 14 Ноября 2011, 21:10 | Сообщение # 6 |
|
участник
Сейчас нет на сайте
| Revolver_45, в след. уроке я обо всем расскажу и объясню как можно подробней. Я пока показал как сделать шаблон будущего сайта. Есть только один минус в моей работе - я пишу все только по своей памяти, на телефоне и я не могу протестировать код на работоспособность, но я уверен что он будет работать.
Если есть ошибки, пишите, критикуйте.
Сообщение отредактировал Ex3mDM - Понедельник, 14 Ноября 2011, 21:12 |
|
|
| |
| Duskly | Дата: Понедельник, 14 Ноября 2011, 21:22 | Сообщение # 7 |
|
Rush Games
Сейчас нет на сайте
| Revolver_45, это вроде чтобы с телефона норм отображалось.
Разрабатываеться:
флеш игра для соц. Сетей (Бои друзей) - временное название!
3д игра (пока без названия)
|
|
|
| |
| Revolver_45 | Дата: Понедельник, 14 Ноября 2011, 21:46 | Сообщение # 8 |
|
почетный гость
Сейчас нет на сайте
| Duskly, Нет. Я то знаю для чего данный тег служит. Это объявление типа документа, нужное для того, чтобы сообщить браузеру по какому из стандартов HTML ему обрабатывать страницу. Ну или проще сказать, что так ты указываешь какую версию HTML или xHTML ты используешь. В данной статье автор почему-то придерживается давно устаревшей спецификации версии 3.2
В новейшем стандарте HTML 5 этот тег выглядит проще <!DOCTYPE html> и имеет только такой вид, без всяких там строгих или расширенных типов
rtytyrtyr
Сообщение отредактировал Revolver_45 - Понедельник, 14 Ноября 2011, 21:47 |
|
|
| |
| Ex3mDM | Дата: Понедельник, 14 Ноября 2011, 21:56 | Сообщение # 9 |
|
участник
Сейчас нет на сайте
| Revolver_45, я сейчас пишу второй урок, т.к. выдалась спокойная ночь, завтра мб. уже выложу, там я объясню все что я написал в первом посте.
|
|
|
| |
|
