Урок 1. Знакомство с HTML. Теория.
Понедельник, 8 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 745
Подписаться на комментарии по RSS
На сегодняшний день практически каждый житель Земли знает, что такое Интернет и веб-страница. Эти понятия стали частью нашей повседневной жизни, о которых говорят, думают, которые используют в различных целях. Электронные адреса можно увидеть по телевизору, услышать по радио или прочитать в газете. Именно поэтому тема создания веб-страниц интересует очень многих!
Раз Вы решили сделать сайт своими руками, то мы с радостью проведем Вас по всем ступеням сайтостроения. Начиная с самых простых Html страниц, мы постепенно дойдём до создания оригинальных многофункциональных сайтов, таких, которыми Вы пользуетесь каждый день, но… созданных Вами!!!Не слушайте тех, кто говорит, что создавать сайты непосильно сложная задача! На самом деле научиться можно всему, главное желание и стремление. Если Вы будете последовательно изучать все уроки, вникая в их смысл, то вскоре заметите, что всё не так страшно, как казалось. Не переходите сразу к сложным урокам, даже если у Вас уже есть некоторые азы HTML. Помните, что повторение – мать учения! К тому же, возможно из наших уроков Вы узнаете что-то новое. Главные советы:
1. Если Вы действительно хотите научиться, не копируйте код, а прописывайте его вручную.
2. Пробуйте разные варианты изменения кода, так Вы быстрее поймёте что, зачем и почему.
3. Не бойтесь допускать ошибки! Не делает ошибок тот, кто ничего не делает!
4. Если Вам что-то не понятно – не бойтесь, пишите! И мы поможем Вам!
Вот, в принципе, и всё! Если Вы готовы и собрались с мыслями, то приступим!
Для начала предлагаем Вам познакомиться с самим HTML !
Internet - это всемирная сеть разнородных компьютерных сетей, взаимодействующих по протоколу TCP/IP. Web является одним из приложений Internet, предназначенным для массового распространения разнообразной информации. Носителями информации в Web служит Web-страницы, содержащие текст, графику, мультимедиа элементы и гиперссылки на другие ресурсы Web или Internet. Для передачи гипертекста Web-страниц в Internetиспользуется специально разработанный протокол HTTP (Hyper Text Transfer Protocol). Для разработки Web-страниц используется специальный язык разметки гипертекста HTML (Hyper Text Markup Language). Для просмотраWeb-страниц используется специальная клиентская программа Web-браузер. В окне Web-браузера отображаются результатыинтерпретации языка HTML с Web-страниц, полученных во время навигации по гиперссылкам.
HTML — теговый язык разметки документов. HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки надругие документы HTML и ресурсы Internet.Тэги – это специальные пометки идентификаторы для определения категории, описания, поиска данных и задания внутренней структуры страницы. Структурная разметка – это форматирование текста, в котором управляющие коды (тэги) не несут никакой информации о внешнем виде документа, а лишь указывают границы и свойства его составных частей, то есть задают его логическую структуру. Например, задание того, как будет выглядеть текст, заключенный в тэги на странице. На самом деле тэгами можно нетолько форматировать текст, ними можно делать очень многое! В поддержку языка HTML была создана целая серия языков программирования, таких как Java, JavaScript, Perl, PHP и т. д. С помощью этих языков стало возможным создание динамических веб-страниц, включающих формы,таблицы, фреймы и другие элементы. Но не будем забегать наперёд, обо всём по порядку!
Любой документ на языке HTML представляет собой набор элементов (текста, кода), причём начало и конец каждого элемента как раз обозначается тэгами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тэг перевода строки <br>). Давайте, к примеру, рассмотрим такой код:
Давайте, к примеру,рассмотрим такой код:
<html> <head> <title>Заголовок</title> </head> <body> <p>Какой-то текст</p> </body> </html>
Итак! Что же такое <html>……….</html> (1-я и 8-я строка)?
Это основной тэг, который обозначает html документ, т.е. в нём заключаются всё тело документа. Если разбить код страницы на части, то открывающий тэг <html> можно назвать головой, а закрывающий </html> ногами. Закрывать его нужно всегда в самом конце! Проще говоря, как крыша и фундамент у здания. Вы же не положите крышу между этажами? Так же история и с фундаментом… Вот так и у html страницы должно быть начало и конец. Смотрим дальше. <head>……..</head> (2,4 строка). Это тэг, выделяющий заголовочную часть документа. Сюда добавляются различные тэги и мета тэги, но подробнее об этом мы поговорим позже. В него же вставляется и тэг с самим заголовком документа <title>………. </title>(3 строка). Этот заголовок отображается сверху в окне браузера в виде названия вкладки.Дальше идет тэг <body>……….</body> (5,7 строка). Этот тэг содержит основную часть документа. Именно внутри этого тэга прописывается главная и самая объемная часть страницы, т.е. та информация, которая будет видна пользователю! Функции, текстовые содержания, изображения и прочее… Ну а тэг <p>…..</p> простой тэг абзаца, т.е. текст,заключенный в такие тэги будет всегда выводиться с абзаца!Вот и всё! Видите, совсем не сложно!
Вы спросите - как создаются HTML документы? Очень просто! Существует множество простых и сложных программ для написания HTML-страниц. Все они делятся на две категории: программы, автоматически вставляющие тэги, и обыкновенные стандартные текстовые редакторы, созданные для любых платформ, в качестве рабочей площадки можно использовать даже стандартный «Блокнот»!Какие программы лучше использовать для создания веб-страниц? Это, без сомнений, Adobe GoLive, Microsoft FrontPage, Macromedia Dreamweaver. Для редактирования изображения могут применяться программы Adobe Photoshop, Macromedia Fireworks, Corel Photo-Paint, Adobe Illustrator, Macromedia Freehand, Corel DRAW, Adobe LiveMotion, Macromedia Flash. Для работы с аудио- и видео - программы Adobe Premier, Apple Final Cut Pro, Apple Quick Time, RealProducer, Windows Media.
Хотя во многих перечисленных программах веб-страницы создаются автоматически, следует обязательно учить язык HTML, чтобы понимать, как строится веб-страница. Поэтому в наших уроках мы будем создавать их с помощью простейшего текстового редактора.В любом случае выбор редактора для создания Вашего HTML документа зависит исключительно от Ваших понятий удобства и личных предпочтений!
Теперь Вы знаете основную структуру html страницы. А подробности мы будем изучать в следующих уроках! Наши уроки будут максимально прокомментированы и, происходить будут следующим образом: теория – практика – теория – практика... Поверьте, такая структура изучения будет максимально выгодной для Вас.Так Вы изучите всё постепенно, и у Вас не возникнет путаницы! В любом случае, при возникновении вопросов пишите в комменты или техподдержку и мы поможем Вам!
Что ж, желаем всем удачи! Приступайте к первому практическому уроку!
- Урок 1. Знакомство с HTML. Теория.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 14. Создаём кнопку в CSS.
- Урок 3. Форматирование текста
- Урок 2. Создание первой HTML страницы.
- Урок 4. Добавление изображения.
- Урок 5. Работа с таблицами.
- Урок 8. Табличный дизайн сайта.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 8. Табличный дизайн сайта.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 7. Работа с таблицами. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 3. Форматирование текста
Со стороны выглядит довольно просто, но если начинаешь изучать глубже голова идет кругом. Вы упоминаете программы для создания веб страниц. В частности меня интересует Dreamweaver. На сколько качественный сайт можно создать, зная основы языка HTML и используя данную программу?
Используя Dreamweaver Вы можете создаль сайт любой сложности. Не смотря на то, что в этой программе можно создавать страницы автоманически в разделе "Дизайн", лучше следить за кодом страницы, т.к. в нём могут появиться необязательные фрагменты кода, которые сделают страницу намного тяжелее.
Хорошо, что придуманы редакторы, автоматически вставляющие тэги, а то вручную писать все эти теги для боле менее приличной страницы точно убьёшься. Полезно конечно для начала руками попробовать, чтоб понять, что это такое вообще, ну а дальше редактор не заменим.
Бесспорно, редактор на много упрощает жизнь, но не вижу никаких проблем (если нужен простенький сайт) создать сайт с нуля вручную! Главное в любом деле - понимать то, что ты делаешь!
Хорошая и полезная статья для начинающих. Очень правильный совет по поводу того что код не нужно копировать а набирать в ручную, так работает и зрительная память и память при наборе. Если собираетесь сами набирать HTML обязательно воспользуйтесь этим советом.
Кажется я нашла нормальный сайт с пошаговой инструкцией для создания сайта. Во всяком случае после этой статьи я начинаю понимать с чего нужно начинать. Да, кстати, очень доходчиво объяснили про тэги, а то обычно встречаются определение этого слова на не совсем понятном для начинающего языке. Теперь вопрос новичка: "Какой лучше использовать редактор начинающему web-строителю? На компе установлена Windows 7."
Уважаемая Irina ! Для того, чтобы изучить HTML, CSS и другие языки web-программирования, для началы мы рекомендуем Вам использовать стандартную программу "Блокнот". О том, как с ним работать Вы можете узнать из урока 2.Создание первой HTML страницы.
Если хотите код с красочной подсветкой, то можно установить Notepad++
Этот редактор пойдёт и на windows 7
Спасибо за советы. Сегодня буду пробовать.