Основы HTML - Страница 9 - Остров Советов

Основы 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></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=Тест]
Так дорогие мои, кто думал что Серебрянка добрая и пушистая ошибся Bracken

)
Так вот сидя в школе на уроке я решила составить вам тест.
Нет конечно я добрая, но сейчас вас ждёт мини тест.
Итак суть проста, вот три варианта HTML кода, в каждом есть ошибки ваши задача их найти.

Внимание! Ответ присылать в ЛС!!!
Код №1

Code

Код №2

Code

<html>

<head>

<title></title>

Всем привет, я рада вас видеть на своей страничке. Хотя смотреть пока неначто. Потому что Бри сделала в коде ошибку)
</head>

</html>

Код №3

Code

Удачи)
[/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

Вставьте этот код и посмотрите что получилось (:

Если что-то непонятно задавайте вопросы.

Домашнее задание:
Сделать таблицу 5х5
[/cut]

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

Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^

Сообщение отредактировал Серебрянка - Среда, 29.02.2012, 20:47

Скуби

Дата: Воскресенье, 23.10.2011, 19:56 | Сообщение # 121

Бремя свободы осилит счастливый

Группа: Участники Советов

Сообщений: 9475

ураааа!! четвёртый урок! Вот:

Время – словно ткань, натянутая в пяльцы,
Кто нас ныне вышьет серебром?

Мельница - Обряд

Фикбук

Искрогривка

Дата: Воскресенье, 23.10.2011, 21:36 | Сообщение # 122

Соберано всея Кэналлоа

Группа: Участники Советов

Сообщений: 492

Code

<html>
<head> <title></title> </head>
<body>
<ul>
<li>Наш сайт молодой.</li>
<li>Наш сайт скоро будет хорошо выглядеть.</li>
<li>Вы поможете нам стать активными...</li>
<li>И популярными.</li>
<li>Ну, и мы ждём вас!</li>
</ul>
<ol>
<li>Гл. админ учится HTML</li>
<li>Мне все время помогают</li>
<li>Мы - большая семья!</li>
<li>А семья - это дружба и любовь.</li>
<li>Они у нас есть.</li>
</ol>
</body>
</html>

я не знаю, зачем.
ficbook;
аватар (с) maria-m.

Серебрянка

Дата: Воскресенье, 23.10.2011, 21:55 | Сообщение # 123

Stream

Группа: Участники Советов

Сообщений: 4371

Пеплолика, Искрогривая, отлично)

Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^

Ледосветик

Дата: Четверг, 27.10.2011, 21:56 | Сообщение # 124

Ледяная кошка радостного светлого будущего

Группа: Участники Советов

Сообщений: 3052

Ник:Ледосветик
Почему решили изучать HTML: интересно
Есть ли у вас фотошоп(он тоже пригодится): да ты его видела
Будете ли вы вовремя сдавать домашнее задание постараюсь

Ava Ç Лунный_Лучик *с ролевой*
Запись в книгу
Моя гостиная
Мой проект
Я на ролевой

Марка by Серебрянка

А ты умный кот?

Серебрянка

Дата: Четверг, 27.10.2011, 22:39 | Сообщение # 125

Stream

Группа: Участники Советов

Сообщений: 4371

Точка_Неизвестности, принята

Новый урок будет на следующей неделе...

Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^

Звездный_Ветер

Дата: Суббота, 29.10.2011, 13:19 | Сообщение # 126

Шерлокоман

Группа: Участники Советов

Сообщений: 3708

Урок 4:

Пещера моей половинки (Зарницы)
В каждом человеке должно быть всего по чуть-чуть. Ведь если человек добрый, и неимеет зла, то он не человек, а андроид, запрогромированный так, что бы только любить и делать добро.©

Ав © ??

Рейчел_Вулф

Дата: Суббота, 29.10.2011, 19:15 | Сообщение # 127

Участник Советов. Писатель, фотошопер, переводчик

Группа: Участники Советов

Сообщений: 197

Серебрянка, вот четвертый урок:

Ничего что я добавила немножко самодеятельности?

|Моя пещера
Чудесный аватар by Мелодия *w*

Серебрянка

Дата: Суббота, 29.10.2011, 23:09 | Сообщение # 128

Stream

Группа: Участники Советов

Сообщений: 4371

Звездный_Ветер, Рейчел_Вулф, отлично)

Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^

Burberry

Дата: Суббота, 29.10.2011, 23:57 | Сообщение # 129

Участник Советов. ФШ, переводчик, Черный кот ОС

Группа: Участники Советов

Сообщений: 35

Ник:Burberry.Но называй меня просто Бетта.)
Почему решили изучать HTML:Мне в будущем обязательно пригодится.
Есть ли у вас фотошоп(он тоже пригодится):Честно?Нету.
Будете ли вы вовремя сдавать домашнее задание:Постараюсь.

Манило что меня туда,
Поймет лишь только небо,
И что подвинуло меня, на этот трудный шаг,
Поймет лишь только небо.
Ведь небо дарит свет и жизнь.
И понимает все.
Поймет все только небо. Лишь небо. Больше ничего.

Серебрянка

Дата: Воскресенье, 30.10.2011, 08:22 | Сообщение # 130

Stream

Группа: Участники Советов

Сообщений: 4371

Burberry, принята