|
Основы HTML
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 13:02 | Сообщение # 1 |
Stream
Группа: Участники Советов
Сообщений: 4371
| Многие из нас всегда здавались вопросом что же такое HTML и как с ним работать.
Я могу дать вам несколько уроков по HTML. С их помощью вы расширите свои знания и наконец разберётесь, что же такое этот страшный HTML.
Для тех кто совсем не знает что это советую почитать материал из Википедии приведенный ниже.
[cut=HTML]HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.
HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML
Общее представлениеЯзык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы сейчас читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.
БраузерыТекстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera.
[/cut]
Сначала проведем набор учеников.
Анкета:
Code Ник:
Почему решили изучать HTML:
Есть ли у вас фотошоп(он тоже пригодится):
Будете ли вы вовремя сдавать домашнее задание:
[cut=Ученики]
Рейчел_Вулф(5+)(5-)(тест пройден)(5+)(5+)
Лепесток_Сирени
Пеплолика(5+)(5-)(тест пройден)(5-)(5+)(5+)
Искрогривая(5+)(5)(тест пройден)(5)(5+)
Златоус
Астра(5+)
Дождь(5+)(4)
Basil
Звездный_Ветер (5+)(5)(тест пройден)(5)(5+)
Василёк
Взрыв}
Ночная
Леопардовая_Звезда
Синяя_Звезда
Enigma_Ametistium]
Календула(5+)(5)
Цветочная_Пыльца(5+)
Дымолапка
Жемчужинка(5+)
Утренница(5+)(5-)
Dimona
Ежевичка
Burberry
Вьюга(5+)(5)
Воробушка(5+)(5)(тест пройден)
Огненная_Буря
Bluestar(5+)(5)
[/cut]
Правила:
1. Не стесняться задавать вопросы если что-то непонятно.
2. Четкого расписния уроков у нас нет. Заглядывайте сюда время от времени.
3. Делать домашнее задание.
4. Не оскорблять учителя(меня) и учеников.
[cut=Урок №1]Итак. Язык HTML состоит из тегов.
Тег это команда заключённая в скобки <тег></тег>.
Теги бывают парные и непарные:
Пример парного тега:
<strong></strong>
Пример непарного тега:
<br />
А теперь открываем блокнот и вставляем туда этот код:
Code <html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Этот код можно нзвать "скелетом сайта". Это основа основ.
Давайте разбираться:
<html></html>- это тег который показывает браузеру, что он имеет дело с HTML документом.
<head><head>- тег заголовок страницы который содержит некую информацию. Но она не отображается на самой странице.
<title></title>- название страницы(отображается на вкладке)
<body></body>-внутри этого тега находится видимая информация(та которая отображается на сайте)
Ясно?
Теперь делаем так:
Code <html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Здесь все то, что будут видеть мои посетители)
</body>
</html>
Потом нажимаем Файл-Сохранить как.
Запомните файл нежно сохранять с разрешением не .txt (как предлагает блокнот), а .html
Если все правильно то ваш документ будет выглядеть как иконка интернета. Откройте её и посмотрите что получилось.
Вопросы есть?
Домашнее задание:
Сделать заготовку сайта по моему примеру, т.е. написать название в теге <title></title> и заполнить каким-нибудь текстом тег <body></body>. Попробуйте. Результат оформляйте как я с помощью кнопки "код"[/cut]
[cut=Урок №2]Итак наш второй урок посвещён форматированию текста:
Новые теги:
<br /> - тег для переноса строки, потому что как вы могли заметить если в блокноте пишешь две строчки компьютер делает одну.
я никак не могу оформить пробел поэтому так: & n b s p; (на самом деле это пишется без пробела, просто компьютер иначе не отображает)- это для пробела(он пишется без таких скобок <>), если вы хотите поставить больше одного пробела.
<p></p> - тег для выделения параграфа/абзаца
<hr /> - этот тег создаёт линию
<strong></strong> - жирный текст(можно использовать и такой тег: <b></b>, но strong предпочтительнее)
<small></small> - маленький текст
<big></big> - большой текст
<pre></pre> - если ввести этот тег то текст на странице будет отображаться без изменений т.е. таким же шрифтом как в блокноте, с таким же количеством пробелов и т.д.
<sup></sup> - нажний индекс
<sub></sub> - верхний индекс
Это понятно?
Домашнее задание:
Вот скриношот сайта. Вы должны так же отформатировать текст как я.
Оформлять также при помощи кнопки "код".
Вот текст:
«Коты́-вои́тели» (англ. Warriors) — серия романов о приключениях диких котов и о том, как они выживают на своей территории, написанная Кейт Кэри и Черит Болдри совместно с редактором Викторией Холмс и писательницей Тай Сазерленд, издающимися под общим псевдонимом Эрин Хантер.
Серия разделена на четыре мини-серии (цикла), в каждом из которых по шесть книг. Первый цикл «Воители» начал издаваться в 2002 году, начиная с книги «Стань диким!», которая появилась на русском языке в ноябре 2003 года. Второй цикл, «Новое пророчество», вышел в свет в 2005 году. Первая книга называется «Полночь». Третий цикл, «Сила трёх», начал выходить в России в 2008 году. Четвертый цикл, «Знамение звёзд», начал выходить на английском в 2009 году.
Как ответвление от цикла вышел первый дополнительный том к серии, «Firestar’s Quest», на русском — «Послание». В русском издании эта книга следует за «Закатом», однако по сюжетной линии находится между «Битвой за лес» и «Полночью». Второй дополнительный том «Пророчество Синей Звезды», состоящий из двух книг, «Начало» и «Выбор», вышел на русском в ноябре 2010 года.
Первая книга-гид «Секреты племён» к серии «Коты-воители» была выпущена в оригинале в начале 2007 года (на русском языке — в ноябре 2008). Это первый путеводитель по серии с информацией о племенах — их истории, предводителях, целителях, местах обитания и т. п. Книга цветная и больше других по размеру.
В 2008 году на английском вышла вторая книга-путеводитель по серии — «Коты племён». Она издана на русском в мае 2010 года под названием «Герои племен».
На настоящий момент на английском вышли еще два путеводителя по серии: «Закон племен» и «Битвы племен».
Также вышли на английском книги комиксов в стиле «манга»: «Пропавший воитель», «Прибежище воителя», «Возвращение воителя» (про Крутобока) и «Бич: Путь к власти». Их издание на русском запланировано на второе полугодие 2010 года. [1] На английском языке также вышли книги-манга: «В лесах», «Бегство из леса» и «Возвращение в племена» про кошку Сашу и Звездоцапа. Планируется выход манга о жизни Горелого — это будет трилогия.
также появились манга "судьба небесного племени" Спасение (The Rescue) Коты-Воители: Спасение Warriors: The Rescue Американское издание Цикл: Manga: SkyClan & Stranger Название: The Rescue Кол-во страниц: неизвестно Издательство: HarperCollins Дата выхода: 05.04.2011 Российское издание Цикл: Манга: Небесное племя и Незнакомец Название: Спасение Кол-во страниц: неизвестно Издательство: ОЛМА Медиа Групп Дата выхода: неизвестна
Коты-Воители: За пределами закона Warriors: Beyond the Code Американское издание Цикл: Manga: SkyClan & Stranger Название: Beyond the Code Кол-во страниц: неизвестно Издательство: HarperCollins Дата выхода: 22.11.2011 Российское издание Цикл: Манга: Небесное племя и Незнакомец Название: За пределами закона Кол-во страниц: неизвестно Издательство: ОЛМА Медиа Групп Дата выхода: неизвестна
Коты-Воители: После наводнения Warriors: Beyond the Code Американское издание Цикл: Manga: SkyClan & Stranger Название: After the Flood Кол-во страниц: неизвестно Издательство: HarperCollins Дата выхода: 12.04.2012 Российское издание Цикл: Манга: Небесное племя и Незнакомец Название: После наводнения Кол-во страниц: неизвестно Издательство: ОЛМА Медиа Групп Дата выхода: неизвестна
Вот скрин:
[/cut]
[cut=Тест]
Так дорогие мои, кто думал что Серебрянка добрая и пушистая ошибся  )
Так вот сидя в школе на уроке я решила составить вам тест.
Нет конечно я добрая, но сейчас вас ждёт мини тест.
Итак суть проста, вот три варианта HTML кода, в каждом есть ошибки ваши задача их найти.
Внимание! Ответ присылать в ЛС!!!
Код №1
Code <html>
<head>
<title></title>
<body>
</body>
</head>
</html>
Код №2
Code <html>
<head>
<title></title>
Всем привет, я рада вас видеть на своей страничке. Хотя смотреть пока неначто. Потому что Бри сделала в коде ошибку)
</head>
</html>
Код №3
Code <html>
<head>
<title></title>
<bady>
</bady>
</head>
</html>
Удачи)
[/cut]
[cut=Урок №3]
Итак сегодня у нас очень интересный урок: мы узнаем как делать заголовки, выравнивать текст и раскрашивать его, раскрашивать задний план и изменять размер текста, стиль и цвет отдельно взятого текста)
Начнем с заголовков. Для них есть специальный тег:
<h1></h1> - это тег создает самый большой заголовок.
Но есть еще и такие теги:
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
С увеличением цыфры размер заголовка уменьшается.
С этим закончили.
Теперь существует тег:
<div></div> - создает блок
У этого тега много назначений, но мы изучим наиболее важное. С его помощью можно выравнивать текст.
Например:
<div align="значение"></div>
Вместо слова значение можно поставить следующее:
left - выравнивание по левому краю (по умолчанию)
right - выравнивание по правому краю
center- выравнивание по центру
justify - выравнивание по ширине страницы
С этим тоже закончили.
Перейдем к самому интересному...
к цветам. Простая страничка будет мало интересна, но и слишком яркие цвета не стоит делать!
Итак если вы хотите раскрасить задний план, то команда для его раскрашивания вводится в тег <body></body>
Например:
<body bgcolor="цвет"></body>
С текстом поступаем анологично.
<body bgcolor="цвет" text="цвет текста"></body>
Вот небольшой список цветов:
white - белый
black - черный
green - зеленый
lime - светло-зеленый
gray - серый
silver - светло-серый
yellow - желтый
marron - темно-бордовый
blue - синий
navy - темно-синий
aqua - голубой
teal - изумрудный
red - красный
orange - оранжевый
purple - пурпурный
fuchsia -росовый
olive - оливковый
Теперь если вы хотите изменить цвет, размер и стиль отдельного слова или предложения, то используйте тег:
<font></font>
Он многофункционален:
<font size="размер текста"></font>
Размер может быть разным и пишется так:
<font size="+5"></font>
или
<font size="-5"></font>
Также можно изменить цвет отдельных частей текста:
<font color="цвет"></font>
И так же можно изменить стиль текста:
<font face="стиль текта"></font>
Например:
<font face="Arial"></font>
Ну что голова не заболела)?
Тогда Домашнее задание:
Повторите этот скрин:
[/cut]
[cut=Урок №4]
Сегодня будем делать списки.
Двух видов:
1) Нумерация пунктов происходить точками
2) Нумерация пунктов происходит цифрами
Код для првого:
Code <html> <head> <title></title> </head> <body> <ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> </ul> </body> </html>
Для второго:
Code <html> <head> <title></title> </head> <body> <ol> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> </ol> </body> </html>
Следовательно:
<ul></ul> - создает список где нумерация идет точками
<li></il> - в этот тег пишется то что будет в пункте
<ol></ol> - создает список где нумерация идет цифрами
Домашнее задание:
Сделать два вида списков (в каждом не меньше 5 пунктов)[/cut]
[cut=Урок №5]
Итак пятый урок.
Для начала небольшое примечание:
Тег для вставки картинки:
<img src="ссылка на картинку или название, но обязательно указывать формат (.jpg или другой)">
А теперь основное - таблица
Итак таблица строиться на основе 3-х тегов:
<table></table> - открывает таблицу
<tr></tr> - создает строку
<td></td> - создает ячейку
С этим понятно?
Итак таблица 3х3 выглядит так:
Code <table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Вставьте этот код и посмотрите что получилось (:
Если что-то непонятно задавайте вопросы.
Домашнее задание:
Сделать таблицу 5х5
[/cut]
Примечание: несмотря на то, что уже выложено больше одного урока ученики нужны всегда... Записываемся)
Все вопросы задавайте в этой теме.
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
Сообщение отредактировал Серебрянка - Среда, 29.02.2012, 20:47 |
|
|
|
|
| Рейчел_Вулф | Дата: Воскресенье, 16.10.2011, 13:33 | Сообщение # 2 |
Участник Советов. Писатель, фотошопер, переводчик
Группа: Участники Советов
Сообщений: 197
| Ник: Рейчел_Вулф (скоро сменят)
Почему решили изучать HTML: есть сайт, а кода не знаю)
Есть ли у вас фотошоп(он тоже пригодится): есть GIMP (типа фотошопа)
Будете ли вы вовремя сдавать домашнее задание: Да! (захожу возможно через день)
|Моя пещера
Чудесный аватар by Мелодия *w*
|
|
|
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 13:37 | Сообщение # 3 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Утренняя_Заря, отлично, принята Добавлено (16.10.2011, 13:37)
---------------------------------------------
Кстати если хочешь узнать код сайта, открой его, нажми правой кнопкой мыши и выбери "просмотр HTML кода"
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Рейчел_Вулф | Дата: Воскресенье, 16.10.2011, 14:51 | Сообщение # 4 |
|
Участник Советов. Писатель, фотошопер, переводчик
Группа: Участники Советов
Сообщений: 197
| Серебрянка, прикольно)
|Моя пещера
Чудесный аватар by Мелодия *w*
|
|
|
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 14:55 | Сообщение # 5 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Утренняя_Заря, а что за сайт если не секрет?
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Лепесток_Сирени | Дата: Воскресенье, 16.10.2011, 15:12 | Сообщение # 6 |
Группа: Удаленные
| Ник: Лепесток Сирени ( Там, сокращай как хочешь х) )
Почему решили изучать HTML: Не поверишь о.о Просто интересно.)) Да и в будущем он все ровно пригодится.
Есть ли у вас фотошоп(он тоже пригодится): Да, CS5, ФотоСкайп, Гимп.
Будете ли вы вовремя сдавать домашнее задание: Скорее, всего ^^
Ну так примешь?
|
|
|
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 15:18 | Сообщение # 7 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Лепесток_Сирени, да, конечно
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Рейчел_Вулф | Дата: Воскресенье, 16.10.2011, 16:52 | Сообщение # 8 |
|
Участник Советов. Писатель, фотошопер, переводчик
Группа: Участники Советов
Сообщений: 197
| Quote (Серебрянка) Утренняя_Заря, а что за сайт если не секрет?
MagicWolf. Ролевой форум.
Кстати, а когда урок первый будет? 
|Моя пещера
Чудесный аватар by Мелодия *w*
|
|
|
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 16:58 | Сообщение # 9 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Утренняя_Заря, смотри первое сообщение, тум будут все уроки)
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Рейчел_Вулф | Дата: Воскресенье, 16.10.2011, 17:14 | Сообщение # 10 |
|
Участник Советов. Писатель, фотошопер, переводчик
Группа: Участники Советов
Сообщений: 197
| Серебрянка, о, класс! *побежала делать*
|Моя пещера
Чудесный аватар by Мелодия *w*
|
|
|
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 17:16 | Сообщение # 11 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Утренняя_Заря, *радуецоо*
все понятно да?
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Рейчел_Вулф | Дата: Воскресенье, 16.10.2011, 17:25 | Сообщение # 12 |
|
Участник Советов. Писатель, фотошопер, переводчик
Группа: Участники Советов
Сообщений: 197
| Д/З. 1-й урок.
Code <html>
<head>
<title>Коты Воители</title>
</head>
<body>
Приветствую вас на сайте про котов воителей! Здесь каждый - кто читал и кто не читал книгу - найдет что-то интересное. Располагайтесь поудобнее - мы едем на экскурсию по сайту!
</body>
</html>
Где-то так)
|Моя пещера
Чудесный аватар by Мелодия *w*
Сообщение отредактировал Утренняя_Заря - Воскресенье, 16.10.2011, 17:29 |
|
|
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 17:30 | Сообщение # 13 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Отлично ставлю 5+
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Рейчел_Вулф | Дата: Воскресенье, 16.10.2011, 17:31 | Сообщение # 14 |
|
Участник Советов. Писатель, фотошопер, переводчик
Группа: Участники Советов
Сообщений: 197
| Серебрянка, *радуется* 
*записывает урок в тетрадку*)
|Моя пещера
Чудесный аватар by Мелодия *w*
|
|
|
|
|
| Серебрянка | Дата: Воскресенье, 16.10.2011, 17:32 | Сообщение # 15 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Утренняя_Заря, так, сегодня постараюсь выложить следующий урок)
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
Вниз 
