Учебник html языка: Учебник HTML для начинающих

Лучший учебник html. Основы html

52

Автор Андрей Галямов

Материалы с сайта www.Zvirec.Com

Содержание

• Введение в язык html Краткое вступление к учебнику,основные понятия и термины.

• Урок 1: Структура web-документа. Вставка комментария. Здесь мы рассмотрим основы html, а также научимся вставлять комментарии в тело документа.

• Урок 2: Создаем свою первую страничку В этом уроке Вы создатите свою первую страничку по всем правилам.

• Урок 3: Работаем с текстом В этом уроке изложены базовые средства форматирования текста.

• Урок 4: Продолжаем работать с текстом Здесь мы научимся делать текст жирным, курсивом, подчеркнутым, перечеркнутым, маленьким , большим и.т.д.

• Урок 5: Заканчиваем с текстом В этом уроке мы подробно разберем создание списков в языке html.

• Урок 6: Покоряем html ссылки Тут Вы научитесь создавать все возможные виды ссылок.

• Урок 7: Работаем с изображениями В этом уроке вы увидете, как легко, оказывается, вставлять изображения на страницу.

• Урок 8: Цвет фона и текста Здесь Вы узнаете, как изменять цвет фона и цвет текста в языке html.

• Урок 9: Разберемся с таблицами в html Тут Вы научитесь конструировать html таблицы, это очень важная часть языка html.

• Урок 10: Что такое html формы и зачем они нужны. Здесь мы поговорим о том, что такое формы, посмотрим пример готовой формы, разберем основной синтаксис.

• Урок 11: Заканчиваем разбираться с формами Заканчиваем то, что начали в предыдущем уроке 🙂

• Урок 12: Смотрим форму в действии . В этом уроке я расскажу Вам как увидеть вашу html форму в действии.

• Урок 13: Пару слов про голову документа. Здесь мы разберем такие понятия как название документа, ключевые слова и описание документа.

• Завершение Советы и рекомендации по дальнейшему обучению…

Введение

Рад, что вы решили приступить к изучению моего учебника по html. Поверьте мне, в нем нет ничего сложного, и уже через час вы создадите свою первую страничку. HTML – это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф  и.т.д. Этим как раз и занимается язык html. Чтобы увидеть HTML-коды страницы в Internet, кликните правой кнопкой мыши по странице, в выпавшем меню выберите пункт — view source (или «просмотр HTML кода»). Не пугайтесь! Я еще раз повторюсь – на самом деле, все очень просто!

Что понадобится нам для обучения?

Браузер и Блокнот(или аналогичный простой редактор)  — вот всё, что вам необходимо для работы с данным учебником . Раз вы просматриваете эту страничку – значит браузер у вас уже есть , ну а блокнот я думаю найти не составит труда ( Пуск – Программы — Стандартные — Блокнот).

Почему простой текстовый редактор идеально подходит для изучения HTML и CSS? да потому, что он не изменяет вводимый вами код. Так вы быстро продвинетесь, а ошибки будут только вашими, а не программными.

Возможно вы уже слышали, или даже использовали такие программы, как Microsoft FrontPage, Adobe Dreamweaver, которые упрощают работу с кодом. Пока что забудьте об этих программах! пока учимся в блокноте!

Да, без сомнений Мы будем ими пользоваться, но только после того, как пройдем коротенькие курсы по html и css . Потом просто скачаете у меня на сайте специальный видео-курс по Adobe Dreamweaver и будет вам счастье…

Весь ли здесь HTML ?

Я постарался собрать только ту часть языка, которая действительно используется(из личного опыта создания более 10 сайтов), потому как более чем 40% используется очень редко. Тем более, в дальнейшем мы будем пользоваться Adobe Dreamweaver, и весь труднозапоминающийся код он напишет за нас . Главу по фреймам я выкинул полностью, советую Вам вообще никогда ими не пользоваться, т.к. это уже очень устаревшая технология и рейтинга это Вам не добавит!

Если Вам необходима более полная информация по html, скачивайте книги из соответствующего раздела у меня на сайте.

Учебник html для начинающих. Версия для печати раздела «Учебник html» сайта www.Webremeslo.Ru Введение

Этот учебник целиком и полностью посвящён языку HTML, без знаний которого не обойтись в создании какой либо веб-страницы. HTML язык — это основа, база которую просто таки необходимо знать любому начинающему веб-мастеру! Этот язык, сам по себе (в чистом виде), достаточно простой, думаю его с легкостью может освоить любой «продвинутый» шестиклассник.. в тоже время он позволяет самостоятельно создавать полноценные страницы и сайты.

Рассчитан этот HTML учебник для начинающих «с нуля» людей, которые только только решили освоить веб-ремесло, поэтому старался писать его как можно более развернуто и что называется «доходчиво», в тоже время стараясь охватить весь курс до мелочей, так что может быть и опытный веб-мастер найдет в нём для себя что-то новое или будет использовать его в качестве «шпаргалки», изложенной в прилагаемом справочнике тегов:(http://www.

webremeslo.ru/spravka/spravka.html). Где нет «воды» и нудноватого для уже опытного человека «разжёвывания» материала.

Ну и сразу к делу.. начнем с классики..

Откройте блокнот, да да, тот самый блокнот.. Пуск> Стандартные> Блокноти напишите в нем следующий текст:

<html> <head> <title>Моя первая страничка </title> </head> <body> Привет мир!!! <br> Меня зовут (здесь впишите Ваше имя), это моя первая страничка! </body> </html>

Далее, сохраните этот текст как htmlдокумент, название придумайте сами.. главное чтобы расширение былоhtml

Повторюсь, чтобы не было казусов.. в блокноте кликаем по меню «Файл», выбираем»Сохранить как..»в строке»Имя файла»пишем:index.html, просто по умолчанию блокнот предлагает сохранить файл с расширением*.txt, а нам нужно расширение*. html

Далее открываем этот файл при помощи Вашего браузера.. ну к примеру того же Internet Explorerа(правой кнопкой по нашему файлу. . «Открыть с помощью..»Internet Explorer)

Поздравляю, Вы написали свою первую страничку!!!

Если в Вашей душе загорелась искорка, проснулась тяга к знаниям и творчеству, предлагаю планомерно ознакомится с главами этого учебника. В них на доступном языке с множеством примеров я постараюсь объяснить то, что мы только что написали, а так же как сделать этот документ более привлекательным, вставить в него графику, таблицы, прописать ссылки.. в общем, сделать его полноценным сайтом, заслуживающим место во всемирной паутине.

Глава 1 Что такое html язык и с чем его едят..

Начну, пожалуй, с начала..

HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре — это запросто.

Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые «знают» стандартные команды html языка, и «пережевывая» их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер — составитель документа.

Теперь о командах — их называют дескрипторами, но чаще — тегами.

Вернемся к нашей первой страничке.. итак мы написали:

<html> <head> <title>Моя первая страничка</title> </head> <body> Привет мир!!!

<br> Меня зовут Карлсон, это моя первая страничка! </body> </html>

Так вот то что написано между <…>- называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег<html>понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде. . а вот тег</html>говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.

Так что же мы написали? и как это читает браузер?

Мысли браузера:

<html> — начало документа.. опять работы привалило.. <head> — смотрим словарик английского переводим «голова» …в голове моей опилки не беда!! … здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?

<title> — «название» значит.. это в шапке окна нужно написать его название: Моя первая страничка — опять чайник тренируется.. </title> — все название закончилось.. можно идти дальше.. </head> — ага и в голове кроме названия больше никаких вздорных мыслей не держим.. <body> — «тело» документа все, что написано ниже выставляем на всеобщее обозрение Привет мир!!! — как мило! Достали уже!!! <br> — переносим текст на следующую строчку. . я даже догадываюсь, что в ней будет… Меня зовут (здесь Ваше имя), это моя первая страничка! — ну да так и есть.. ничего пооригинальнее придумать не могут.. </body> — что всё что ли? Больше ничего не отображать? </html> — ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:

1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…>то обязательно должен быть и закрывающий</…>

Хотя есть и исключения как например у нас тег <br>— он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой «Меня зовут..» и Вы увидите, что в результате она заметно опустилась вниз. . (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку «обновить»)

2) Все документы должны иметь вот такой шаблон кода:

<html>— начало документа <head>— начало головы </head>— закрытие головы <body>— начало тела </body>— закрытие тела </html>— конец документа

Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..

3) О порядке:

Открывающий и закрывающий тег по типу <…> </…>представляет собой своего рода ёмкость, ящик в который могут складываться другие теги — ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:

<Тег «большой ящик»> <Тег «ящик средний»> <Тег «ящик маленький»> содержание </Тег «ящик маленький» > </Тег «ящик средний» > </Тег «большой ящик»> Если писать, например, так:<Тег «большой ящик»> <Тег «ящик средний»> <Тег «ящик маленький»> содержание </Тег «большой ящик»> </Тег «ящик маленький»> </Тег «ящик средний»>

То получится белиберда, которая в голове не укладывается, «большой» уже закрыт, а из него «торчит» «маленький», который заперт в «среднем», а «содержание» рассыпалось везде. . Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..

Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..

Введение в HTML (бесплатный учебник)

💬 «Каждый великий разработчик, которого вы знаете, добился успеха, решая проблемы, для решения которых они не были квалифицированы, пока они действительно не сделали это». (Патрик Маккензи)

Введение

Добро пожаловать на второй день курса веб-разработки для начинающих. Сегодня день HTML! HTML предназначен для структурирования данных. Его не волнует, как что-то выглядит; для этого и нужен CSS, который мы будем изучать завтра.

Точно так же, как прочность здания зависит от его фундамента, HTML — это скелет, который скрепляет все вместе. Чтобы поместить его в более веб-контекст, HTML гарантирует, что страницу можно использовать на различных устройствах и браузерах, и предоставляет структуру для добавления CSS, JavaScript и содержимого самого веб-сайта или приложения.

Что мы будем делать сегодня?

1. Узнайте об HTML и базовом синтаксисе HTML
2. Узнайте о различных элементах HTML, которые мы будем использовать в этом курсе
3. Создать базовую структуру для нашей собственной веб-страницы

Готовы к еще одному приключенческому дню данных, структуры и магии? Пойдем!

1. HTML

Мы уже узнали, что HTML — это тип языка, который структурирует содержимое; другими словами, он помечает различные элементы, такие как изображения и текст, чтобы сообщить вашему браузеру, как отображать содержимое и в каком порядке.

Вчера мы написали кое-что на HTML и поработали с несколькими элементами HTML, но толком их не поняли. Давайте изменим это в этом уроке. Мы рассмотрим, из чего состоит HTML, другими словами, из HTML-элементов, а затем используем их для добавления деталей на наш сайт-портфолио.

 

Теги элементов

Мы уже видели несколько HTML-элементов. Вы можете думать о HTML-элементе как об отдельной части веб-страницы, такой как блок текста, изображение, заголовок и т. д. Вчера вы использовали элемент заголовка h2 , который выглядел так:

Каждый элемент HTML имеет HTML-тегов , а тег (

или

) заключен в угловые скобки, такие как < и >. Теги определяют элементы и сообщают браузеру, как их отображать (например, они могут сообщить браузеру, является ли элемент изображением или абзацем текста).

Большинство элементов HTML имеют открывающий тег и закрывающий тег , которые показывают, где начинается и заканчивается элемент. Закрывающий тег — это просто открывающий тег с косой чертой (/) перед именем элемента. Мы можем обобщить формат HTML-элемента следующим образом:

Здесь контент — это то, что мы добавляем. Это может быть что угодно, например «Hello world» в нашем примере с h2; Однако «имя элемента» должно быть одним из предопределенных тегов, таких как h2, h4, p или strong.

Давайте рассмотрим несколько важных вещей, которые нужно знать об элементах HTML, прежде чем мы углубимся в их использование.

 

Атрибуты элементов

Элементы HTML могут иметь определенные атрибуты , которые изменяют их функциональность и поведение. Эти атрибуты записываются внутри открывающего тега. Например,

У нас есть элемент изображения с атрибутом «ширина» со значением 300 и атрибутом «высота» со значением 200, что, как вы могли догадаться, сделает изображение шириной 300 пикселей и высотой 200 пикселей. Давайте посмотрим на другой пример.

Очень точно названный элемент textarea будет отображать поле ввода текста, где наши пользователи могут писать текст. В этом примере rows и cols — это атрибуты, определяющие количество строк и столбцов, которые должна занимать текстовая область соответственно.

Такие атрибуты, как ширина и высота для img или строки и столбцы для текстовой области, полезны непосредственно в HTML. Но некоторые атрибуты имеют особое значение — это означает, что они ничего не делают сами по себе, но требуют от нас написания дополнительных CSS или JavaScript и, таким образом, соединяют три столпа вместе — и мы узнаем о них больше позже в этом разделе. курс.

Обратите внимание, что в некоторых элементах нет содержимого, и, следовательно, они не должны иметь закрывающий тег. Изображениям, например, нужен только атрибут «src» (сокращение от источника или местоположения для поиска изображения).

Обратите внимание на /> в конце (вместо ). Это связано с тем, что элементы изображения имеют исходный атрибут (src), который извлекает изображение для отображения. Там нет контента, который должен идти внутрь. Есть и другие элементы, похожие на img, которые не требуют закрывающего тега.

 

Вложенные элементы

Элементы HTML могут быть вложены друг в друга; другими словами, один элемент может содержать другие элементы. Взгляните на следующий блок кода.

Обратите внимание, что у нас есть два сильных элемента в нашем элементе абзаца. Это абсолютно законно.

Для простоты чтения мы можем отформатировать предыдущий блок кода следующим образом:

HTML не важно, сколько места или сколько новых строк вы используете. Предыдущие два примера будут отображаться точно так же (но последний легче читать, поэтому мы предпочитаем его).
 

Другие правила

Помимо этого, есть несколько основных правил, которые применяются ко всем HTML-страницам. Например, самым внешним элементом HTML должен быть сам. Точно так же весь «видимый» контент помещается в, а вся конфигурация/метаданные (данные о самой странице) — в.

Помните вчерашний код нашей первой веб-страницы?

По этой причине