Первые шаги в коддинге. Или с чего начать изучение HTML

Авто 17.07.2019
Авто

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

Из чего состоит структура HTML-документа

Тег сообщает о том, что начинается структура html-документа, — что заканчивается. Между тегами хранится в большей части информация для браузера и поисковых систем. В тегах содержится заголовок нашей страницы. Тег говорит о том, что далее идёт информация предназначенная для пользователя, же естесственно говорит о том, что информация для пользователя заканчивается.

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


— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.

Мой первый сайт Привет всем!
А это мой первый сайт.

Результат можно посмотреть .


— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

  • align — Определяет выравнивание линии. Может принимать значение left, center, right.
  • color — Задаёт цвет линии.
  • noshade — Рисует линию без трехмерных эффектов.
  • size — Задаёт толщину линии.
  • width — Задаёт ширину линии.

Код с использованием тега


:

Мой первый сайт Привет всем!


А это мой первый сайт.

Визуальный пример находится .

Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

Cуществуют и другие одиночные теги (, ,
, , , ,


, , , , , , , , , ), но с ними я познакомлю вас чуть позже.

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

Для наглядного примера взглянем на тег , который используется для выделения текста, он устанавливает жирное начертание шрифта. Теги и являются границами, которые определяют область выделения текста. Вот код, где в последней строке забыли закрыть тег :

Мой первый сайт Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.

Как видите, ничего сложного нет, теперь вы можете создать несколько страниц перелинкованных между собой.

Теги для выделения текста

Существует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.

— устанавливает жирное начертание шрифта.

— устанавливает курсивное начертание шрифта.

— добавляет подчеркивание к тексту.

— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

— перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать

— отображает текст моноширинным текстом. Исключён из HTML5.

— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

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

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

— используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

— предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.


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

— определяет текстовый абзац. Тег

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

..
..

— HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег

представляет собой наиболее важный заголовок первого уровня, а тег

служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги

,…,

относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align , который определяет выравнивание заголовка, может принимать значения left — выравнивание заголовка по левому краю, center — выравнивание по центру, right — выравнивание по правому краю, justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

— представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color — устанавливает цвет текста, face — определяет гарнитуру шрифта, size — задает размер шрифта в условных единицах.

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

— указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.

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

Ниже приведу код, в котором я использовал все эти теги:

Мой первый сайт

HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

What is WebFonts?

WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").

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

При написании данной статьи описание некоторых тегов было взято отсюда

Я решил продолжить эту актуальную тему. Я составил список лучших ресурсов для изучения html и css, чтобы помочь желающим в изучении этих вопросов. Помню, когда сам начинал вебмастером, мне очень не хватало подобной подборки качественных и полезных ресурсов.

Сначала немного определений:

Html (от английского "HyperText Markup Language" - язык разметки гипертекста) - это стандартный язык разметки веб-страниц.

Css (от английского "Cascading Style Sheets" - каскадные таблицы стилей) - это технология описания внешнего вида веб-страницы.

Без знания html и css вести свой сайт будет очень проблематично - даже счетчик статистики или тот же баннер поставить не получится. Не бегать же за помощью к специалистам или создавать тему за темой на форумах? Нужно просто взять и выучить.

По своему опыту могу сказать, что html и css можно выучить за 1 месяц. Конечно, я не говорю о профессиональных высотах - вы до них сами доберетесь при желании.

На мой взгляд, лучший способ выучить html, css, да и другие тематики, включая продвижение сайтов - это завести свой сайт и на нем практиковаться. Кстати, можете посмотреть первый созданный мною сайт по картам для игры Counter-Strike , созданием которых я тогда увлекался. Вот карты и их скрины , созданные стариком Глобатором в те времена, когда он еще не знал, что такое топ-10, тИЦ и PR, и беззаботно резвился на солнышке создавал трехмерные карты 🙂 . Я создал этот сайт за месяц, изучая html и css на практике.

Для того, чтобы выучить html и css, совсем необязательно быть техническим специалистом. К примеру, я вообще гуманитарий и по математике у меня в основном было "2" 🙂 . Так что выучить html и css под силу любому желающему. Перечисленные мною ресурсы подойдут также и для того, чтобы в любой момент вы могли с их помощью выяснить какой-либо интересующий вас момент по html и css.

Сайты для изучения html и css

Начну подборку полезных ресурсов для изучения html и css с сайта, по которому я сам занимался. Это Дикие уроки html , которые написала Валентина Ахметзянова ака Дикарка . Она настолько весело и интересно описала все необходимые моменты, что изучение html и css с помощью ее уроков превращается в увлекательное занятие. Кстати, можете почитать для блога сайт. Диких уроков вполне достаточно, чтобы выучить html и css на необходимом для работы вебмастером уровне.

Представляете, кем бы я был, если бы развивался дальше в теме Фотошопа? Я бы был настоящим монстром! Но я связался с SEO и прозябаю тут, набирая эти буквы скрюченными от мороза пальцами 🙂 . Да шучу, тут тоже тепло и неплохо кормят 🙂 .

мистер Олимпия 5 августа 2014 в 11:17

Почему стоит заняться веб-разработкой и с чего начать

  • CSS ,
  • HTML ,
  • Разработка веб-сайтов

Всем привет!

Работаю в области веб-разработки два с лишним года, и думаю, что могу высказать некоторые мысли по данной тематике.
Программированием увлёкся три года назад. Сначала пробовал себя в языках программирования из семейства C, но мне не удавалось проявить там свои творческие способности. Потом я где-то услышал про веб-разработку. И как оказалось, это было то, что мне нужно.

Почему стоит заняться веб-разработкой?

Для меня это чистое творчество. Представьте себе абсолютно чистый холст, как у художника. У вас есть все краски, кисточки, осталось лишь научиться рисовать. Обычно это сложнее, чем кажется, но не для веб-мастера. Сейчас в просторах интернета масса всевозможных инструкций, онлайн-курсов, примеров с наглядными иллюстрациями. И в принципе, создать что-то новое при помощи этих мануалов не так уж сложно. Веб-разработка открывает широкие, почти безграничные возможности для творчества. Конечно, языки программирования, не заточенные под веб, тоже позволяют реализовать много интересного, но, как мне кажется, в среде веб-разработки сделать это гораздо проще.

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

С чего начать?

Самый распространённый вопрос среди тех, кто только начинает изучать веб-разработку. Прежде всего я советую понять и разобраться как построена веб-страница. Для этого необходимо знание HTML-тегов, или хотя бы большей части из них. Именно они формируют страницу. Тегов довольно много, но на практике обычно используются 30-40, а иногда и меньше.

HTML-тег это элемент веб-страницы, который обычно имеет следующий формат:

Содержимое тега

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

Атрибут пишется внутри тега:

Содержимое тега

В данном случае выбран атрибут align , который определяет выравнивание содержимого внутри тега. Атрибут обычно имеет несколько значение. Center означает что содержимое будет выравнено по центру.

Вот очень полезные ссылки, которые помогут вам быстро начать:
htmlbook.ru/html
html.manual.ru
www.codecademy.com/tracks/web

После этого следует приступать к изучению CSS-стилей. Что это такое? Простыми словами, это стили к HTML-тегам, которые располагаются на веб-странице. Стилей гораздо больше, чем HTML-тегов. Но это и хорошо, так как вы можете создавать абсолютно разные варианты с одним и тем же тегом. Стили нужно знать, и чем больше, тем лучше. Для себя можно провести следующую параллель: стили – дизайн тегов.

Обычно стили пишутся либо прямо в HTML документе, при помощи специального тега style :

Либо в отдельном CSS файле без тегов:
div { background-color: #FFFFFF; }
В том и в другом случае всем тегам div на веб-странице, будет присвоен цвет фона, в первом случае чёрный, во втором случае белый.
Я предпочитаю второй вариант, то есть создавать отдельный файл, но и первым нередко пользуюсь.

Ниже ссылки, в которых вы сможете найти более подробное описание каждого стиля:
htmlbook.ru/css
css.manual.ru
www.codecademy.com/tracks/web

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

Хочу добавить ещё несколько полезных советов:
- Всегда уделяйте особое внимание путям (URL) к файлам или к картинкам. Зачастую именно тут спотыкаются не только новички, но опытные веб-мастера.
- Постарайтесь запомнить 20-30 кодов для цвета. Например, #000000 – чёрный, #FFFFFF – белый и так далее. Вот полезные ссылки: www.puzzleweb.ru/html/colors_html.php , www.artlebedev.ru/tools/colors .
- Начните работать с HTML, CSS в среде Notepad++ . Очень простой, понятный редактор с подсветкой синтаксиса.
- Советую хорошо ознакомиться с DOM
- Постарайтесь подтянуть английский язык.

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

В следующей статье постараюсь подробнее описать HTML, с упоминанием некоторых подводных камней, на которые чаще всего наступают новички.

Теги: веб-разработка, сайтостроение

Сейчас трудно представить себе человека, работающего с Интернетом, и не знающего что такое html. Многие хотят выучить этот язык. Казалось бы, чего же проще - существует пугающе огромное число книг, посвященных этой теме. Неужели, язык html такой сложный, что ему посвящены огромные тома?

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

Для начала, я хотел бы привести примерный план этой статьи. Если кому-то что-то не интересно - может смело пропустить.

  • Какие тэги нужно знать
  • А как сделать красиво?

Что такое html и зачем он нужен

html - это не язык программирования, как многие думают. Это всего лишь, язык разметки. Его назначение - определять структуру документа. Если кто-то вам скажет, что html нужен, чтобы определять внешний вид странички - не верьте ему! Этот человек либо из прошлого, либо не совсем понимает предмет.

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

Поддержкой html, как и многих других технологий, связанных с web, занимается консорциум W3C . Если вы хотите узнать все из первых рук - пожалуйте на их сайт. Но должен вас предупредить: спецификации, выпускаемые W3C, носят рекомендательный характер, поэтому браузеры всегда по-разному воспринимают один и тот же html код. Это делает верстку гораздо сложнее, чем она есть на самом деле.

В настоящее время последняя спецификация html имеет номер 4.0. Есть так же, язык xhtml, который гораздо более требователен к разработчику, потому что содержит более жесткие стандарты. Так, тэги в html могут писаться в любом регистре, а в xhtml - только в нижнем. И так далее. Я придерживаюсь спецификации xhtml и буду ниже описывать ее.

Язык html составляет набор тэгов. Это директивы браузеру, которые указывают ему сруктуру вашего документа. Прошу заметить: структуру . За внешний вид сегодня отвечает другая технология — CSS, разговор о которой пойдет ниже. Для того, чтобы выучить html, по сути, нужно выучить набор тэгов и их аттрибутов и все! Можно приступать к созданию тестовых сайтов.

Какие тэги нужно знать?

Для того, чтобы начать работу, нужно выучить небольшой набор тэгов. Сейчас я приведу их перечисление, сгруппировав по определенным признакам. (Группировка является моим субъективным видением предмета и не претендует на абсолютную истинность)

  • Основные: html, head, title, body;
  • Структурные: div, span;
  • Текстовые: p, ul, ol, li, h1-h6, br, pre;
  • Таблицы: table, tr, td;
  • Ссылки: a;
  • Мультимедиа: img, object;
  • Фреймы: frameset, frame, iframe;
  • Формы: form, input, textarea, label, select, option;
  • Факультативные: hr;
  • Специальные: script, link, meta;

Как видно, тэгов не так уж и много. Однако, их изучение может занять значительное время, потому что многие из этих тэгов могут снабжаться атрибутами, которые заставляют эти элементы вести себя как-то не так.

Кто-то может возмутиться и сказать, что знает другие тэги, которые работают. Да, действительно, я привел список не всех тэгов, поддерживаемых браузерами. Однако, эти тэги являются основными, и человек, который знает их может сказать, что он знает html. Я нарочно не включал в свой список тэги типа font, которые являются устаревшими. Эти тэги настолько плохи, что даже говорить о них нет смысла, потому что сейчас есть значительно более мощные средства, позволяющие управлять внешним видом страниц и их частей. Лично я считаю необходимым и достаточным знание вышеприведенных тэгов. Потому что остальные либо нужны очень редко, либо не нужны вовсе. А посему, я предлагаю начинать изучение html с изучения этих тэгов.

Как сделать красиво?

Тот, кто попытается сверстать страничку при помощи вышеприведенных тэгов, получит в результате, довольно скромнооформленную страницу, которая будет белой с черным текстом и синими ссылками. Кое-кому, возможно, удастся разнообразить позиционирование блоков информации при помощи таблиц и атрибутов align. Кто-то попытается оживить страницу при помощи вставки картинок. Однако, есть специальное средство для настройки внешнего вида страниц. Это CSS.

Сейчас практически ни один сайт не обходится без применения технологии CSS. Именно на CSS возложена миссия определения оформления документа. Фон страницы, отступы, выравнивания, шрифты, цвета и многое другое находится в компетенции CSS. Поэтому сейчас рекомендуется не использовать теги и атрибуты, определяющие оформление страниц и элементов, а использовать вместо них правила CSS. О том, как же применять CSS лучше почитать в книгах. Но я хочу сказать, что если вы встретили тэг или атрибут, определяющий внешний вид элемента, 10 раз подумайте, прежде, чем применять его! Лучше узнайте, какое правило CSS отвечает за отображение элемента в таком виде, в котором вы хотите его видеть. За очень редким исключением, такое правило находится всегда.

С чего лучше начать изучение верстки?

Верстать лучше всего начинать после того, как поймешь принципы работы веб. Лично я бы составил такой план обучения:

  1. Изучение принципов работы web и структуры клиент-сервер
  2. Изучение тэгов и их атрибутов, с практическими занятиями по их применению
  3. Изучение правил CSS с практическими занятиями по их применению
  4. Изучение табличной верстки
  5. Верстка простого макета таблицами
  6. Верстка сложного макета таблицами
  7. Изучение директив DOCTYPE
  8. Изучение блочной верстки (тэг div)
  9. Верстка простого макета дивами
  10. Верстка сложного макета дивами
  11. Хитрости, приемы, хаки и прочие премудрости от гуру

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

HTML - это сокращение от Hyper Text Markup Language (язык гипертекстовой разметки), на этом языке создаются сайты. Если вы никогда не программировали, изучение может показаться сложным, но, на самом деле, все что вам нужно, чтобы начать обучение - это простейший текстовый редактор и браузер. Вы узнаете, каким образом HTML влияет на текст, верстку различных сайтов и так далее. Знание HTML будет крайне полезным для любого пользователя интернета, и изучение основ займет меньше времени, чем вы думаете.

Шаги

Изучение основ HTML

    Откройте файл HTML. Большинство текстовых редакторов (Блокнот или Word для Windows, TextEdit для Mac) могут быть использованы для создания файлов HTML. Создайте новый документ, и сохраните его (Файл > Сохранить как) в формате веб-страницы, или измените расширение файла на ".html" или ".htm" вместо ".doc," ".rtf," или другого расширения.

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

    • Обратите внимание, что таким образом вы не создаете сайт в интернете. У других людей не будет доступа к этой странице, и вам не нужен интернет, чтобы смотреть свою локальную страницу. Браузер просто интерпретирует HTML-код, который ему дают, неважно, в интернете он, или у вас на диске.
  1. Выучите теги разметки. Теги не отображаются на странице, в отличие от обычного текста. Вместо этого они указывают браузеру, каким образом надо отображать страницу и ее содержимое. "Открывающий тег" содержит инструкцию. Например, есть тег для полужирного текста. Также нужен "закрывающий тег", для разграничения области применения инструкции: в этом примере текст между открывающим и закрывающим тегами отобразится в полужирном начертании. Теги записываются внутри знаков неравенства, но закрывающий тег начинается с косой черты.

    • Открывающий тег записывается между знаками неравенства: < Открывающий тег >
    • В закрывающем теге перед дескриптором (названием) тега ставится косая черта: )
    • Читайте дальше, чтобы узнать об использовании тегов. Для этого шага достаточно запомнить формат записи, теги записываются между знаками неравенства: < > и
    • В некоторых самоучителях HTML, теги называют "элементами", а текст между открывающим и закрывающим тегами называют "содержимым элемента".
  2. Наберите в редакторе тег . Каждый файл html должен начинаться с тега и заканчиваться тегом . Эти теги указывают браузеру, что все содержимое между тегами написано на языке HTML. Добавьте эти теги в файл:

    • Наберите вверху документа.
    • Нажмите enter несколько раз, чтобы создать несколько пустых строк, затем наберите
    • Все примеры из этой инструкции набираются между этими двумя тегами.
  3. Создайте секцию в файле. Между тегами и , создайте открывающий тег и закрывающий тег . Создайте несколько пустых строк между ними. Содержимое, записанное между тегами и , не отображается на самой странице. Выполните следующие шаги, чтобы узнать, для чего нужен этот тег:

    • Между тегами и , напишите </b> и <b>
    • Между тегами и , напишите Как выучить HTML - wikiHow .
    • Сохраните изменения и откройте файл в браузере (или обновите страницу, если файл уже открыт). Текст должен отобразиться в названии страницы, над адресной строкой?
  4. Создайте секцию . Все остальные теги и текст в этой примере записываются в секцию body, содержимое которой отображается на странице. После закрывающего тега , но до тега , добавьте теги и . До конца этой инструкции работайте с секцией body. Ваш файл должен выглядеть примерно так:

    • Как выучить HTML - wikiHow
  5. Добавьте текст, используя различные стили. Пришло время добавить настоящее содержимое страницы! Все, что вы напишете между тегами body, отобразится на странице после обновления в браузере. Не используйте символы < или > , поскольку браузер попытается интерпретировать содержимое как тег, вместо текста. Напишите Hello world! (или что захотите), затем попробуйте добавить эти теги к тексту, и посмотрите, что получится:

    • Hello world! выделяет текст "курсивом": Hello world!
    • Hello world! выделяет текст "полужирным": Hello world!
    • Hello world! зачеркивает текст: Hello world!
    • Hello world! отображает шрифт в виде верхнего индекса: Hello world!
    • Hello world! отображает шрифт в виде нижнего индекса: Hello world!
    • Попробуйте разные теги вместе: Как будет выглядеть Hello world! ?
  6. Разделите текст на параграфы. Если вы попробуете написать несколько строк текста в файле HTML, вы заметите, что разрывы строк не отображаются в браузере. Абзацы определяются следующими тегами:

    • Это отдельный абзац.

    • После этого предложения следует разрыв строки.
      тег до начала этого предложения.
      Это первый тег, не требующий закрывающего тега. Такие теги называются "пустыми".
    • Создайте заголовки, чтобы показать названия разделов:

      текст заголовка

      : Самый большой заголовок

      текст заголовка

      (заголовок второго уровня)

      текст заголовка

      (заголовок третьего уровня)

      текст заголовка

      (заголовок четвертого уровня)
      текст заголовка
      (самый маленький заголовок)
  7. Научитесь создавать списки. Есть несколько способов создания списков на странице. Попробуйте нижеизложенные варианты, чтобы узнать, какой вам больше нравится. Обратите внимание, что список помещается между двумя тегами (например для маркированного списка), и элементы списка тоже выделяются специальными тегами, например .

    • Маркированный список:
      • Первая строка
      • Вторая строка
      • И так далее
    • Нумерованный список:
      1. Один
      2. Два
      3. Три
    • Список определений:
      Кофе
      - горячий напиток
      Лимонад
      - холодный напиток
  8. Сверстайте страницу, используя разрывы строк , горизонтальные линии, и картинки . Пришло время добавить что-то кроме текста. Попробуйте следующие теги, или перейдите по ссылкам, чтобы получить больше информации. Используйте онлайн-хостинг, для создания ссылки на картинку, которую вы хотите разместить:

    • Перевод строки:
    • Горизонтальная линия:
    • Вставить картинку :
  9. Продвинутый уровень HTML

      Выучите атрибуты. Атрибуты записываются внутри тега, указывая на дополнительную информацию. Формат атрибутов такой: название="значение" , где название определяет атрибут ("color", для атрибута цвета), а значение указывает на его значение (например "red", для красного цвета).

      • Атрибуты на самом деле уже применялись в предыдущем разделе основ HTML. Тег использует атрибут src , якоря относительных ссылок используют атрибут name , а ссылки используют атрибут href . Как вы уже заметили, все атрибуты записаны в формате ___="___" ?
    1. Поэкспериментируйте с таблицами HTML. Создание таблицы предполагает использование различных тегов. Вы можете поэкспериментировать, или прочитать инструкцию .

      • Создайте теги таблицы:
      • Содержимое каждой строки таблицы заключите в теги:
      • Заголовок столбца определяется тегом:
      • Ячейки в последующих строках:
      • Пример использования этих тегов:

        Столбец 1: МесяцСтолбец 2: Сэкономлено денег
        Январь100 рублей



Рекомендуем почитать

Наверх