Содержание
HTML — это сокращение от языка разметки гипертекста. Это бред для «чего-то, что делает простой текст хорошо выглядящим». Это код, который стоит за каждой веб-страницей. Даже этот. И, что удивительно, это на самом деле довольно просто.
Изучение базового HTML-кода может (почти) быть разбито на две общепринятые дисциплины: стиль a.k.a, манипулирующий внешним видом, и ссылка, a.k.a, маркировка и указание мест расположения и внутри документов. HTML не может сделать ничего более сложного, чем рисование таблицы или создание фреймов, и мы не собираемся переходить на PHP или Java.
Тем не менее, HTML все еще далеко от проторенного пути для вашего среднего Джо. Это волшебство, и не ваше дело. Моя цель сегодня состоит в том, чтобы в течение нескольких минут дать вам некоторые строительные блоки HTML. Вы пока не станете программистом, но вы сможете просмотреть источник веб-страницы, понять его и получить изображение, которое Flickr так старается скрыть от вас.
Шаг первый — концепция Теги
Как было сказано ранее, базовый HTML-код манипулирует простым текстовым документом для применения стиля и ссылки. Это делается путем применения «тегов». Тег делает не что иное, как указание позиции или выбора документа и указание вида волшебства, которое необходимо выполнить.
Это, и только эта часть документа затрагивается.</тег-пример-1>
Что-то только что произошло, предшествующее этой части документа
Пример 1 показывает предложение, которое заключено в два тега, начальный и конечный теги. Все между ними затронуто. Очень распространенные примеры сделать текст жирным, скоропись или создание ссылка на сайт. Конечный тег идентичен начальному тегу, но в угловых скобках ему предшествует косая черта (/).
В примере 2 показан тег, который работает один и (возможно) не нуждается в закрытии. Хотя это и не обязательно, иногда также пишется, чтобы подчеркнуть этот атрибут. Одиночные теги не влияют на «часть» документа, но обозначают локальное волшебство, то, что происходит «между». Типичными примерами являются разрывы строк и разрывы абзацев.
Замечания: для одиноких тегов,,, и все означают одно и то же.
Это, и только эта часть документа затрагивается.
Иногда теги позволяют указывать дополнительные атрибуты. Типичными примерами являются шрифт и цвет текста или ширина, высота и источник изображения. В этих случаях после имени тега следует пробел и номер атрибута со значением, снова разделенные пробелами. Значение является переменной частью этой формулы. Обратите внимание, что конечный тег остается неизменным независимо от атрибутов.
Мы рассмотрим некоторые общие теги в следующих шагах.
Шаг второй — Расслоение HTML, ГОЛОВА ТЕЛО
Теги HTML, HEAD и BODY для HTML-документа — это то же, что спальня, кухня и гостиная для дома. Эти инкапсулирующие теги распределяют большие части документа.
- просто указывает на использование кода HTML. Они будут отображаться на каждой веб-странице, обычно в начале и в конце, и охватывать практически весь другой код, включая следующие два.
- пометьте «административное здание». Они будут содержать заголовок и включать определенные сценарии. Обычно в самом начале (не каламбур) документа, это то, что вам не нужно.
- находится ниже тегов HEAD и составляет большую часть документа. Эта часть рассказывает о том, что на самом деле отображается на вашей веб-странице. Здесь живут текст, изображения, ссылки и почти все, что вы можете видеть в своем браузере. Здесь мы играем. Следующие теги встречаются в части BODY документа HTML.
Шаг третий — потому что ,
Заставить вас чувствовать себя симпатичной
Заставить вас чувствовать себя симпатичной
Мы уже говорили, что HTML был языком разметки. Это значит сделать текст приятным. Помните, что HTML восходит к тому времени, когда веб был очень текстовым. Кроме того, интернет был бы слишком медленным, чтобы поддерживать YouTube. Вот некоторые из самых распространенных тегов, которые делают красивые вещи.
- заставляет ваш текст выглядеть смелый
- заставляет вас писать курсивом
- подчеркивает то, что вы только что написали
Вам будет приятно узнать, что они также работают в разделе комментариев. Не злоупотребляйте ими, хотя.
попадает в перерыв, заставляя вас продолжить на новой линии- указывает на абзац, создавая очень большой разрыв
Это позволяет структурировать документ, потому что фактический разрыв ничего не значит в документе HTML.
позволяет вам манипулировать множеством других вещей с помощью текста, используя такие атрибуты, как размер, лицо и цвет.
Идеальный пример будет Смурфики.
- в позволяют быстро составлять заголовки разных размеров. H1 самый большой и H7 самый маленький. Те, которые мы используем в статьях MakeUseOf, обычно касаются H3.
В настоящее время разметка часто хранится в отдельном CSS файл. Точные цифры стиля объясняются внешне, и для их применения требуется лишь «пометить» часть документа. Это делается с помощью ДИВ теги. Например,
SOMETEXT
будет искать headermakeuse из класса в файле CSS. Мы не будем обсуждать это подробно.
Шаг четвертый — встроенные изображения с ![]()
Изображения стали привычными на страницах HTML, но за этим стоит фрагмент кода. это один из двух тегов, которые мы собираемся обсудить подробно, потому что это то, что вы сможете использовать. Подумайте только о тех раздражающих веб-сайтах, которые не позволяют загружать некоторые картинки на рабочий стол (я смотрю на вас, Flickr). В следующий раз просто зайдите в источник и возьмите источник самостоятельно.
Вот некоторые из атрибуты используется вместе с вкладкой IMG.
- SRC =»http://site.com/image.jpg/»
Очень важно. Атрибут source указывает местоположение картинки. Правильно, изображение никогда не отображается на веб-странице, а извлекается из внешнего источника. Получив этот адрес, вы получите фотографию.
Иногда отображается только часть URL. Фактический URL будет зависеть от местоположения файла HTML. Это называется относительным адресом, в отличие от абсолютного адреса. Образцовый http://site.com/dir1/dir2/dir3/page.html может отображать значение «image.jpg», если изображение находится в том же каталоге, что и веб-страница. В этом примере полный адрес будет http://site.com/dir1/dir2/dir3/image.jpg.
Если вы встретите относительный адрес «dir4 / image.jpg», изображение будет находиться в http://site.com/dir1/dir2/dir3/dir4/image.jpg
Точно так же «../image.jpg» заставит вас вернуться на один каталог, «../../image.jpg» на два каталога и так далее.
- высота = «200» ширина = «50%»
Эти теги определяют размер изображения. Он ничего не говорит о реальном размере изображения. Размеры могут быть добавлены в пикселях (где 200 и 200 пикселей являются одинаковыми) или в процентах. Если указаны только высота или ширина, другой изменяется соответственно. Использование обоих тегов позволяет «растянуть».
- alt = «альтернативное имя или комментарий»
Тег alt указывает текст, отображаемый при наведении курсора мыши или когда изображение не загружается. Более конкретно, это то, что XKCD использует для этих забавных воспоминаний.
Правильное использование будет, например,
Шаг пятый — ссылки сделаны с тегом
Этот может быть даже более важным, чем тег IMG. Тег позволяет пометить место в документе и дать ссылку на документы, изображения, файлы и даже привязки на других сайтах HTML. Вот самые распространенные атрибуты.
- HREF =»// www.makeuseof.com»
Один из самых распространенных атрибутов, письменный текст. Вы можете создавать ссылки, определяя веб-адрес и инкапсулируя указанный «текст привязки». Ссылки также можно использовать в разделе комментариев, если вы не ссылаетесь на спам или неприемлемый контент.
- имя =»neverwhere»
Используемый вместе с атрибутом имени, тег создаст якорь. Вы можете использовать этот якорь для обратной ссылки на той же странице или даже через Интернет. На ссылку можно ссылаться, используя относительный или абсолютный URL, соответственно или.
В заключение
Это та часть, в которой я признаю, что мы только слегка коснулись базового HTML-кода. То, что мы увидели сегодня, позволит вам просмотреть и понять большую часть простых веб-сайтов. Давай, попробуй. Вы определенно найдете некоторые теги, которые вы не знаете, но здесь Google пригодится. Если вы хотите, есть куда больше информации, и вы все можете найти ее в Интернете.
Если вы ищете что-то очень конкретное, например, изображение, аудиофайл или ссылку, вам не нужно читать всю HTML-страницу. Нажмите Ctrl + F и найдите эти файлы или соответствующие теги. Вы знаете, что вы ищете сейчас, особенно когда вы нашли это.
Как вы думаете? Ваше первое или последнее знакомство с HTML? Дайте нам знать, что вы думаете в разделе комментариев ниже, и не бойтесь попробовать некоторые из кода разметки!
Кредит изображения: Belyaevskiy / Depositphotos
