Hitskin.comЭто предпросмотр стиля с Hitskin.com
Установить стиль • Вернуться к информации о стиле
Html - уроки.
Участников: 4
Страница 1 из 1
Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:23 pm
- Спойлер:
- Не знала, где создать подобную тему.Вот решила здесь.Да, большинство форумчанок виртуозно справляются с ВВ-кодами, но вот с Html работать осмелится не каждый. Надо это исправлять!
Советую на досуге почитать, ведь если вы заняты, то не сможете выполнять практические задания, и по просту не будете вникать в суть урока.
Последний раз редактировалось: Ленусик (Вт Окт 18, 2011 9:32 pm), всего редактировалось 2 раз(а)
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:30 pm
Ступенька 1-ая.
- Спойлер:
- Порядок прежде всего, поэтому перед началом работы мы создадим на нашем компьютере отдельную папку для будущей страницы.
D:\первые шаги\
У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>
Сохраним этот документ, присвоив ему имя *.html
D:\первые шаги\index.html
Многие спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html", у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.
Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:
- Файл -> Сохранить Как (File -> Save as)
- Дальше вводите имя своего документа, например: index.html (а не просто index; приписка *.html должна быть обязательно).
- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).
Вот и все. Надеюсь, теперь у всех все будет в порядке.
Теперь откроем браузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в браузере наш документ.
Файл - Открыть - кнопка Обзор - Наш документ (index.html)
File – Open – Browse – index.html
Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:32 pm
Ступенька 2-ая
- Спойлер:
Первое, что нам нужно усвоить: хтмл (html) - это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: html не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).
Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «добро пожаловать!». Сохраните. Посмотрите в вашем броузере, что получилось.
Итак, все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в броузере.
Как мы видим на нашем примере: тэгов много, и они разные
. Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги. Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы, даже не смотря на бури, ураганы и другие стихийные бедствия.
<html>
Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:
</html>
Некоторые тэги, вроде <br>, не требуют закрывающего тэга.
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:35 pm
Ступенька 3-я
- Спойлер:
- <head> </head> - голова документа
<body> </body> - тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации (наша служба и опасна и трудна, и на первый взгляд как будто не видна. Например <title>- заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд на заголовок окна... Увидели?
Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следующие несколько ступенек будут посвящены именно этим тэгам: мы узнаем, как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом. Но прежде, все-таки закончим наш разговор о тэгах, в общем.
<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).
Обратите внимание:
<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>
Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.
Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке:
<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>
Так что будьте внимательны, и пишите код своих страничек аккуратно и вдумчиво.
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:40 pm
Ступенька 4-ая
- Спойлер:
- Начнем с малого, легкого, и даже интересного, и постепенно перейдем к сложному, большому, и, возможно, даже нудному, без чего не обходится ни одно обучение. Но не буду вас расстраивать заранее. Итак, на этой ступеньке мы будем учиться раскрашивать. Для начала нам будет нужна палитра (все цвета интернета - http://www.artlebedev.ru/tools/colors/). Лучше всего сохраните палитру у себя на компьютере, она вам еще не раз пригодится:
Файл – Сохранить как (File – Save as)
Зачем все это? А затем, что все обозначения цвета в Html прописываются именно таким способом. Например, белый цвет – ffffff. Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.
<font color="#CC0000"> Добро пожаловать! </font>
Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.
Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.
Кстати, если вы хотите лучше усвоить материал наших уроков, то вам следует не только исполнять от точки до точки мои задания, но и пытаться самостоятельно экспериментировать с кодом вашей странички на основе полученных вами знаний.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать! </font>
</body>
</html>
Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже.
Как же еще задавать цвета в документе? - вспомним об открывающем тэге <body>:
<body text="#336699">
Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font>. Если цвет текста в <body> не задавать, то по умолчанию он будет черным.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font>
</body>
</html>
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:44 pm
Ступенька 5-ая
- Спойлер:
- С цветами для текста мы разобрались, теперь подумаем о фоне. На этой ступеньке мы узнаем, как изменять цвет фона документа, и поговорим немного об этике.
Цвет фона устанавливается в уже знакомом нам тэге <body>:
<body bgcolor="#000000">
Для наглядности я прописала черный цвет, вы же свой документ можете раскрасить любым другим. Кстати, если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше всегда прописывайте цвет фона в body, а так же цвет основного текста (как его задавать вы уже знаете) и цвета ссылок (с ними мы познакомимся чуть позже).
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font>
</body>
</html>
Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона (это на всякий случай, если вы еще не поняли – одному тэгу может быть присвоено несколько атрибутов.
<body text="#336699" bgcolor="#000000">
С теоретической частью на данной ступеньке мы закончили, теперь присядем и немного поговорим о цветах. Нет, не о тех, которые растут в лесах, полях, оранжереях, а о цветах документа.
Я хочу попросить вас, мой дорогой спутник, не злоупотреблять яркими фонами (желтым, красным, салатовым, ну, и черным с яркой смесью текста на нем). Почему? Да, просто пожалейте глаза ваших друзей, знакомых и случайного посетителя. Не следует также употреблять слишком много различных цветов на вашей страничке, это, как и яркий фон, отвлекает от содержания, мешает прочтению и выставляет вас самого не в лучшем свете.
Пример: Девочка в ярко-розовых джинсах и противном салатовом топике с надписью Kiss me, безусловно, привлечет внимание, но надолго ли? Что вы о ней подумаете? Не уподобляйтесь такой не очень разумной девочке.
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:50 pm
Ступенька 6-ая
- Спойлер:
В этой главе мы поговорим о параграфах. Параграфы вводятся тэгом:
<p></p>
С помощью параграфов мы можем центрировать текст:
<p align="center">текст</p>
С помощью параграфов мы можем выровнять текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обоим краям документа:
<p align="justify">текст</p>
Теперь введем параграфы в наш документ и посмотрим наглядно, что получится (в наш пример я подставила параграф с атрибутом центрирования текста (align="center"), попробуйте подставить в параграф атрибут align с другими значениями: Left, Right, Justify).
Кстати, правильно говорить не выравнивание, а выключка: выключка по левому краю, правому, центру, по обоим краям. Если вы позже будете углубляться в область дизайна, то вам наверняка этот термин встретится. Между прочим, HTML не имеет к дизайну ни малейшего отношения, не считайте, что, изучив HTML, вы станете вдруг дизайнером, это большое заблуждение многих начинающих в области сайтостроительства.
Но, вернемся к нашему HTML и параграфам. Запомните: никогда нельзя вводить в документ подобную конструкцию:
<p></p>
Пустые элементы <p> без какого-либо содержания (других тэгов или текста) могут игнорироваться броузерами. Не забывайте это. Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:
<center> текст </center>
«Однако», - может возмутиться, мой читатель, - «а как же относительно других типов выравнивания? Вы рассказали только об альтернативе центрирования».
Не волнуйтесь, я еще просто не успела рассказать вам все. Я вовсе не молчаливый партизан: секреты HTML выдам и другу, и врагу.
Конечно, тэг <center> хорош, но остался нам он еще с прошлых версий HTML (да, их было несколько, все в этом мире развивается, HTML не исключение). Пока что этот тэг никто не отменял, и его можно использовать, но это не слишком желательно.
Как же лучше поступить? Лучше использовать тэг <div></div>, одно из назначений которого выравнивание содержимого вашего документа. Все четыре значения атрибута align можно употреблять с <div>:
<div align="center"> текст </div>
<div align="left"> текст </div>
<div align="right"> текст </div>
<div align="justify"> текст </div>
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг?
</p>
</body>
</html> (посмотреть)
Я тут за вас набросала примерный текст вступления, вы придумаете, конечно, что-нибудь свое. Но прежде мы завершим наш разговор о <div> и <p>. Параграф не может содержать в себе другие параграфы, и также тэг <div></div>. Т.е. следующие конструкции будут не верны, и вводить их в документ нельзя даже под страхом смерти:
<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>
и
<p align="right">
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>
Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю.
<div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>
Конечно, <p> и <div> не несут в себе исключительно функцию выравнивания элементов. Но поскольку я хотела в этой главе освоить с вами только выравнивание, то к другим возможностям использования <div> и <p> мы вернемся гораздо позже, т.к. это уже более сложная тема для разговора, и вы, мой читатель, пока что к ней не готовы.
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 9:54 pm
Продолжение будет завтра, т.к.у нас поздно и я почти ничего не соображаю!
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Cerulean Вт Окт 18, 2011 10:06 pm
Ленусик, Хотелось бы спросить, пока лень мне читать. в общем, как заключить в хтмл(кодом как бб([code])?
Cerulean- Salvatore
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 10:10 pm
ТигрёнокЧо, нет, например: <form >текст</form> и т.п. почитай не пожалеешь!)
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Cerulean Вт Окт 18, 2011 10:13 pm
Ленусик, уже прочла, хотя азы давно знаю, но всё равно спасибо! Хоть вспомнила!
Плюснула =)
Плюснула =)
Cerulean- Salvatore
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 10:15 pm
ТигрёнокЧо, не за что)
(но если честно я ожидала чего-то большего
)
(но если честно я ожидала чего-то большего
)
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Cerulean Вт Окт 18, 2011 10:15 pm
Ленусик, Чего? плюса? поставила! в первом сообщении посмотри!)
Cerulean- Salvatore
Re: Html - уроки.
автор 001101 Вт Окт 18, 2011 10:41 pm
Ленусик, полезная тема, поставила плюсик 
Особенно учитывая то, что хтмл знаю я поверхностно.
Особенно учитывая то, что хтмл знаю я поверхностно.
001101- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Вт Окт 18, 2011 10:41 pm
Ой я не видела)ТигрёнокЧо пишет:Ленусик, Чего? плюса?
спасибочки))))))ТигрёнокЧо пишет:плюс поставила!
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Ленусик Сб Окт 22, 2011 8:44 am
Ступенька 7-ая.
- Спойлер:
- В этой главе мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга <font></font>.
Начнем с заголовков. Существуют шесть уровней заголовков:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
Давайте теперь введем заголовок в наш документ. Мне кажется, что фраза "Здравствуйте, это моя первая страница" так и просится, чтобы ее выделили:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг?
</p>
</body>
</html> (посмотреть)
В пример я ввела заголовок третьего уровня <h3></h3> (мой любимый размер. Смотрите, что получилось. Как мы видим, визуально заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Также после закрывающего </hx> происходит автоматически перенос на другую строку.
Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
Как всегда, применяем новые знания на практике. Давайте, выделим, что мы горим желанием завести еще одного виртуального друга.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font></div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size="+1"> еще один виртуальный друг? </font>
</p>
</body>
</html>
Прежде, чем мы двинемся дальше, хочу предупредить, что есть такая опасная болезнь у начинающих сайтостроителей, как гигантомания. Ее симптомы: непомерно большие размеры шрифта, гигантские кнопища на пол экрана, вместо маленьких и милых кнопочек, и толстый (жирный) во всех случаях текст. Поэтому напоминаю: стандартный size (по умолчанию) ="+0".
Жалейте глаза своих посетителей, и они к вам потянутся.
Ленусик- Звезда мирового масштаба
Re: Html - уроки.
автор Yes, please Сб Ноя 05, 2011 5:38 pm
Очень интересный материал. Когда-то скачала весь учебник. Научилась, но дальше 10 ступени все смутно помню. 
Yes, please- PALE FLESH
Похожие темы» HTML и CSS
» Уроки под музыку
» Когда вы делаете уроки?
» Какие уроки вы хотели бы видеть?
» Сколько времени вы делаете уроки?
» Уроки под музыку
» Когда вы делаете уроки?
» Какие уроки вы хотели бы видеть?
» Сколько времени вы делаете уроки?
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения|
|
|