|
Основы 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 |
|
|
|
|
| Синяя_Звезда | Дата: Вторник, 18.10.2011, 20:17 | Сообщение # 61 |
Группа: Удаленные
| Ник: Синяя Звезда
Почему решили изучать HTML: в будущем хочу создать сайт...
Есть ли у вас фотошоп(он тоже пригодится): есть Гимп
Будете ли вы вовремя сдавать домашнее задание: буду стараться (если и будут задержки, то они будут связанны со школой)
|
|
|
|
|
| Enigma_Ametistium] | Дата: Вторник, 18.10.2011, 20:25 | Сообщение # 62 |
A Long Walk Stills our Hearts
Группа: Участники Советов
Сообщений: 4437
| Ник: Энигма Аметистиум)) Можно просто Эня)
Почему решили изучать HTML: Интересно!!! Очень интересно, ведь это программирование, а меня это затягивает))
Есть ли у вас фотошоп(он тоже пригодится): Есть))
Будете ли вы вовремя сдавать домашнее задание: Ох прости, но наверное нет. Компьютер мне дается только по выходным и вторникам так что... (((
Но можно обменяться номерками, и я смогу тебя предупреждать, если что... ?
Не очень правда поняла, что такое HTML(( Язык программирования?
- Целитель из Риджхорна очнулся. Его зовут Эйвинд.
- Звучит как имя целителя. Как он?
|
|
|
|
|
| Серебрянка | Дата: Вторник, 18.10.2011, 20:53 | Сообщение # 63 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Синяя_Звезда, Enigma_Ametistium], приняты
Enigma_Ametistium], это язык разметки веб-страниц, если говорить на примитиве язык создания сайтов. Например КВЗЗ так сделан.
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Волнистая | Дата: Вторник, 18.10.2011, 23:40 | Сообщение # 64 |
Слова на листьях
Группа: Участники Советов
Сообщений: 259
| Ох, прошу прощения, можно задать дурацкий вопрос?
Я сделала все так, как написано выше. Дело в том, что в создании сайтов я ни бум-бум. Но мне бы хотелось узнать, а как же делается дизайн? А как же делается вообще все? Просто создавать странички, уходящие в никуда, не очень интересно...
В Токио я часто гуляю поздней ночью и в последнее время стал замечать, что кошки собираются вместе. Что же это значит? Неужели они действительно разговаривают? Если смотреть издалека, вроде не мяукают. Примерно шесть кошек молча сидят кружком где-нибудь в укромном месте. Мне очень хочется тоже войти в этот круг, но стоит подойти поближе, как они разбегаются. Есть ли какой-нибудь способ войти в их круг?
"THE HYDE" гл. 11.
|
|
|
|
|
| Серебрянка | Дата: Вторник, 18.10.2011, 23:47 | Сообщение # 65 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Волнистая, это все я напишу дальше. И про дизайн тоже. Он делается с помощью фотошопа. Но это будет позже. Сейчас основы. Пройдем и дизайн и как делать многостраничные сайты...
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Календулаold | Дата: Среда, 19.10.2011, 06:53 | Сообщение # 66 |
Фотошопер, горе-поэт
Группа: Участники Советов
Сообщений: 326
| Ник: Календула
Почему решили изучать HTML: хочу создать сайт. ^^
Есть ли у вас фотошоп(он тоже пригодится): конечно
Будете ли вы вовремя сдавать домашнее задание: постараюсь.
З.Ы. Самые-самые основы я знаю, но этого не хватает.
пещера|уроки фш|творчество
[любить кошку можно только на ее условиях © Пол Грей]
Сообщение отредактировал Календула - Среда, 19.10.2011, 06:55 |
|
|
|
|
| Серебрянка | Дата: Среда, 19.10.2011, 07:30 | Сообщение # 67 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Календула, принята
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Звездный_Ветер | Дата: Среда, 19.10.2011, 08:53 | Сообщение # 68 |
|
Шерлокоман
Группа: Участники Советов
Сообщений: 3708
| http://savepic.su/367150.png
Пещера моей половинки (Зарницы)
В каждом человеке должно быть всего по чуть-чуть. Ведь если человек добрый, и неимеет зла, то он не человек, а андроид, запрогромированный так, что бы только любить и делать добро.©
Ав © ??
|
|
|
|
|
| Серебрянка | Дата: Среда, 19.10.2011, 15:44 | Сообщение # 69 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Звездный_Ветер, молоцец, но не заметила, что на моем скрине текст между линиями заключн в тег <pre></pre>, а так 5
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Цветочная_Пыльца | Дата: Среда, 19.10.2011, 16:22 | Сообщение # 70 |
Участник Советов. Фотошопер, переводчик, писатель
Группа: Участники Советов
Сообщений: 13
| Ник: Цветочная Пыльца
Почему решили изучать HTML: Потому что это пригодиться в будущем
Есть ли у вас фотошоп(он тоже пригодится): да
Будете ли вы вовремя сдавать домашнее задание: конечно)
Майн пещеркО))) Пиксель разукрашен моими кривыми лапками
|
|
|
|
|
| Серебрянка | Дата: Среда, 19.10.2011, 16:23 | Сообщение # 71 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Цветочная_Пыльца, принята. Спрашивай если что не понятно)
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Цветочная_Пыльца | Дата: Среда, 19.10.2011, 16:32 | Сообщение # 72 |
|
Участник Советов. Фотошопер, переводчик, писатель
Группа: Участники Советов
Сообщений: 13
| Code <html>
<head>
<title>Цветочная Пыльца</title>
</head>
<body>
Привет вам всем!
</body>
</html>
Майн пещеркО))) Пиксель разукрашен моими кривыми лапками
|
|
|
|
|
| Скуби | Дата: Среда, 19.10.2011, 16:48 | Сообщение # 73 |
Бремя свободы осилит счастливый
Группа: Участники Советов
Сообщений: 9475
| В имени файла припиши html Вот так: Для сайта.html
Время – словно ткань, натянутая в пяльцы,
Кто нас ныне вышьет серебром?
Мельница - Обряд
Фикбук
|
|
|
|
|
| Серебрянка | Дата: Среда, 19.10.2011, 17:01 | Сообщение # 74 |
|
Stream
Группа: Участники Советов
Сообщений: 4371
| Цветочная_Пыльца, правильно)
Коты не спрашивают, они просто берут все, что им надо.
Домишко
Deviantart
Аватарка © Брусничка, спасибо^^
|
|
|
|
|
| Цветочная_Пыльца | Дата: Среда, 19.10.2011, 17:01 | Сообщение # 75 |
|
Участник Советов. Фотошопер, переводчик, писатель
Группа: Участники Советов
Сообщений: 13
| Пеплолика, мерси*
Майн пещеркО))) Пиксель разукрашен моими кривыми лапками
|
|
|
|
|
Вниз 
