Учебник HTML. Основы HTML
Этот учебник целиком и полностью посвящён языку HTML, без знаний которого не обойтись в создании какой либо веб-страницы. HTML язык — это основа, база которую просто таки необходимо знать любому начинающему веб-мастеру! Этот язык, сам по себе (в чистом виде), достаточно простой, думаю его с легкостью может освоить любой «продвинутый» шестиклассник.. в тоже время он позволяет самостоятельно создавать полноценные страницы и сайты.
Рассчитан этот HTML учебник для начинающих «с нуля» людей, которые только только решили освоить веб-ремесло, поэтому старался писать его как можно более развернуто и что называется «доходчиво», в тоже время стараясь охватить весь курс до мелочей, так что может быть и опытный веб-мастер найдет в нём для себя что-то новое или будет использовать его в качестве «шпаргалки», изложенной в прилагаемом справочнике тегов. Где нет «воды» и нудноватого для уже опытного человека «разжёвывания» материала.
Ну и сразу к делу.. начнем с классики..
Откройте блокнот, да да, тот самый блокнот.. Пуск> Стандартные> Блокнот и напишите в нем следующий текст:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
<br>
Меня зовут (здесь впишите Ваше имя), это моя первая страничка!
</body>
</html>
Далее, сохраните этот текст как html документ, название придумайте сами.. главное чтобы расширение было html
Повторюсь, чтобы не было казусов.. в блокноте кликаем по меню «Файл», выбираем «Сохранить как..» в строке «Имя файла» пишем: index.html, просто по умолчанию блокнот предлагает сохранить файл с расширением *.txt, а нам нужно расширение *. html
Далее открываем этот файл при помощи Вашего браузера.. ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. «Открыть с помощью..» Internet Explorer)
Поздравляю, Вы написали свою первую страничку!!!
Если в Вашей душе загорелась искорка, проснулась тяга к знаниям и творчеству, предлагаю планомерно ознакомится с главами этого учебника. В них на доступном языке с множеством примеров я постараюсь объяснить то, что мы только что написали, а так же как сделать этот документ более привлекательным, вставить в него графику, таблицы, прописать ссылки.. в общем, сделать его полноценным сайтом, заслуживающим места во всемирной паутине.
www.webremeslo.ru
Основы создания сайта в современных реалиях
От автора: приветствую вас на webformyself. В этой статье я хотел бы обсудить основы создания сайта в современных реалиях и что вам нужно будет знать и уметь, если вы хотите научиться создавать веб-ресурсы.
Способы создания сайта
Для начала стоит сказать, что сегодня создать свой интернет-проект можно по-разному. Можно вообще заказать спецам под ключ, можно делать самому. Сегодня мы рассмотрим именно то, какими способами вы можете сделать все самостоятельно. Я бы выделил три:
Самый сложный вариант. Сначала будущий сайт проектируется, потом рисуется его макет в графическом редакторе, после этого все это переносится с помощью html и css в код и получается в принципе уже готовый сайт, но после этого его еще обычно натягивают на какой-то движок, чтобы им можно было удобно управлять.
Плюсы данного способа в том, что на выходе можно получить очень качественный уникальный ресурс.
Другой способ заключается в том, что вы сначала ставите любую популярную cms (чаще всего wordpress) и там уже есть тысячи готовых бесплатных шаблонов. Так вот, вам остается только найти, установить и выбрать нужный шаблон. Минус только в том, что поскольку шаблон беплатно распространяется, у кого-то он тоже может стоять, и тогда ваше оформление неуникально.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееЧтобы избежать этого, я рекомендую обязательно переделать код шаблона под свои нужды. Вы можете сделать это самостоятельно, если имеете знания в области html, css и php, особенно вам понадобится второй.
Либо же вы можете заказать редизайн шаблона у фрилансеров, но мы договаривались обсуждать только то, что вы можете сделать самостоятельно.
Третий способ – создание сайта в конструкторе. Его отличительная особенность в том, что вы можете совсем не разбираться в технологиях, но все равно сможете запустить свой проект. Как правило, конструкторы – это те же движки, только они предлагают различные дополнительные возможности, зачастую за деньги.
Вы можете пользоваться их услугами и бесплатно, но тогда получаете некрасивый домен и мало возможностей в управлении. Если говорить о таких конструкторах, как Wix или Ucoz, то там вы можете выбрать один из тысяч шаблонов, установить дополнительные расширения и т.д.
Все-таки стоит сказать, что конструктор связывает ваши возможности, не дает выйти за рамки того, что можно делать. Поэтому создавать в них сайт советую только для пробы, либо тем, кто совсем не хочет ни в чем разбираться, но я все-таки рекомендую движок. Дело в том, что у конструкторов есть одна плохая особенность – вы полностью зависите от этой платформы.
Собственно, можно говорить об этом долго. У конструкторов есть свои плюсы (простота использования, защита) и недостатки (стоимость платных тарифов, широкие, но ограниченные возможности).
Основы создания web-сайта
Сегодня я расскажу именно об основах создания первым способом, то есть самым правильным и стандартным. Он разделен как минимум на 3 этапа. На первом этапе рисуется макет, эту работу выполняет веб-дизайнер. Вернее, перед этим выполняется ряд других действий. Например, создание прототипа макета и согласование деталей с заказчиков. Если вы рисуете макет сами себе, то согласовывать ничего ни с кем не нужно.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееЧтобы нарисовать макет нужно уметь пользоваться PhotoShop на среднем уровне и иметь средне-начальные знания в области веб-дизайна. На самом деле простые макеты вы можете научиться делать буквально за пару дней, и я не шучу сейчас. Если вы пройдете подробный пошаговый видеокурс, то сможете очень быстро втянуться в эту профессию.
На самом деле достаточно обучаться буквально 1-2 недели и вы уже можете выйти на начальный уровень в веб-дизайне и зарабатывать деньги.
Следующий этап – это перенос всего нарисованного на картинке в web с помощью двух технологий html и css. В зависимости от дизайна, также может потребоваться знания того, как делать адаптивную верстку, чтобы приспособить ваш сайт к мобильным устройствам.
На тему верстки у нас есть актуальный видеокурс, в котором вы сможете с полного нуля самостоятельно сверстать 4 макета, причем каждый будет сложнее предыдущего.
Финальный этап – выбор движка, на котором будет работать сайт и интеграция верстки в него. Это подразумевает, что внешний вид сайта никак не изменится, но управлять им вы сможете с помощью удобной админ-панели cms: добавлять записи и страницы, редактировать сам шаблон, добавлять виджеты и меню и т.д. Это делается для удобства и расширения функциональности.
Движок выбирается в зависимости от того, какой тип сайта. Например, многие знают, что для блога лучше всего подходит WordPress, а для интернет-магазина – OpenCart или Magento.
Стоит сказать, что можно обойтись и без рисования макета. В самом деле это возможно, ведь он нужен только для того, чтобы перенести нарисованное в верстку. Можно сделать проще. Если вам понравился дизайн какого-то сайта, вы можете сразу на html и css попытаться его реализовать, немного переделав под себя. Либо переделать все, когда установите движок и скачаете шаблон.
Самый простой вариант – купить премиум-шаблон, где все изменения вы можете делать с помощью визуальных настроек.
Почему полезно знать технологии сайтостроения?
В любом случае, разбираться в веб-технологиях полезно. Почему? Сегодня мы рассмотрели пару способов, которые не требуют от вас знаний, но они ограничивают вас и не дают наилучшего результата.
По-настоящему классные сайты вы сможете делать только в том случае, если изучите нужные технологии. Во-первых, это html и css. Во-вторых, javascript, чтобы добавлять странице различные веб-сценарии. В-третьих, php и основы работы с каким-то конкретным движком. Мало того, что после этого вы сможете себе сделать классный сайт, так и другим сможете на заказ это делать, а это стоит немало.
Только понимая основные веб-технологии и разбираясь в коде вы можете разрабатывать все самостоятельно с нуля, что дает вам просто огромные возможности в плане построения карьеры и профессионального роста.
Соответственно, если вы решили не просто прочитать об основах создания сайта, но и изучить их, то я советую вам начинать прямо сейчас. Даже не завтра, а прямо вот сейчас. С чего начинать? А начинайте с просмотра этого видео, оно даст вам отличное понимание того, как создается интернет-ресурс по этапам. Я на этом буду с вами прощаться.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоwebformyself.com
Учебник по Html для чайников — ОглавлениеИнструментарий. Основные понятия.Простейшие. Таблицы. Дополнительные. Фреймы. |
serblog.ru
Основы HTML для начинающих. Пошаговые уроки. Урок-1
Всем привет!!! Я очень рад, что вы решили покорить вершины основ HTML и это правильный выбор. Ведь перед созданием первого сайта нужно знать основы HTML. Тем более, вам еще не раз придется сталкиваться с HTML кодировкой на веб-сайте. Очень рекомендую ознакомиться с уроками HTML для начинающих на моем блоге, и я гарантирую, что после прохождения этого курса, вы сами с легкостью сможете создать веб-страницу или даже веб-сайт.
Приступим! Для начала выясним, что такое HTML?
HTML – (от англ. Hypertext Markup Language ) это язык разметки гипертекста. Он впервые был разработан британским учёным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах. HTML был предназначен только для разметки текста, картинок и таблицы на веб-страницах. Теперь в HTML документ могут вставляться дополнительно каскадные таблицы стилей (CSS) и языки программирования такие, как JavaScript, VBScript.
HTML не является языком программирования, он предназначен только для разметки текстовых документов.
Для изучения HTML вам достаточно иметь на компьютере Браузер и Стандартный Блокнот или бесплатный текстовый редактор Notepad++.
Чтобы открыть Стандартный блокнот, сделайте такие действия на компьютере: «Пуск» => «Программы» => «Стандартные» => «Блокнот».
Если вы слышали о программах, которые упрощают работу по написанию HTML кода (Microsoft FrontPage, Adobe Dreamweaver), то я не советую пользоваться ими на данном этапе обучения. Набивайте руку в стандартном блокнотике или в текстовом редакторе Notepad++, а когда пройдете этот курс, то сможете пользоваться программами для ускорения. Подписывайтесь на обновления моего блога и читайте, как пользоваться программами Microsoft FrontPage, Adobe Dreamweaver.
Из чего состоит HTML документ?
Для лучшего понимания я подготовил пример. Рассмотрите внимательно рисунок:
Разъяснение.
1). Любой HTML документ начинается с такой строки:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«https://www.w3.org/TR/html4/loose.dtd»>
Этой строчкой мы говорим браузеру, что наш HTML документ соответствует международной спецификации версии 4.01. Благодаря этой строчке ваша страничка будет выглядеть на всех браузерах одинаково.
2). <html> и </html> — это начало и конец документа.
3). <head> и </head> — голова документа. Здесь часто вставляются дополнительные служебные теги, одним из этих тегов является <title></title>. Об остальных служебных тегах вы узнаете в дальнейших уроках, на данном этапе обучения этой информации достаточно .
4). <title> и </title> — заголовок документа.
Этот заголовок будет отображаться в браузере:
в поиске Яндекс или в Гугл.
5). <body> и </body> — тело документа.
Примечание:
Вам частенько придется читать и слышать слово «тег».
Тег — это все то, что находится между скобками < >. Например: <body>, <title>, <html>, <head>, <br>, <p> и др. — все это теги.
Теги не видны при просмотре страницы в браузере, а вот все, что находится не в скобок, будет отображаться в браузере при просмотре.
Тегов много и они разные по назначению.
Существуют теги, которые необходимо закрывать. Например,
открываем тег <p>
и обязательно закрываем тег </p>
А есть теги одиночки, например, вот этот <br>.
Тег — это своего рода контейнер, внутри которого может содержаться текст, картинки и другие теги…
○ Обратите внимание на правильную последовательность открывающихся и закрывающихся тегов:
<тэг1><тэг2><тэг3> … </тэг3></тэг2></тэг1>
Тег, который мы открыли первым — закрываем последним, второй – предпоследним и т.д.
○ А вот пример неправильной последовательности открывающихся и закрывающихся тегов. При такой очередности могут быть ошибки на веб-страничке:
<тэг1><тэг2><тэг3> … </тэг3></тэг1></тэг2>
Ошибка была в <тэг1> и <тэг2>.
Будьте внимательны при написании кода.
Готовый код.
Вот так выглядит готовый стандартный обязательный HTML код веб-странички.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Заголовок страницы</title> </head> <body> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Не расстраивайтесь, если из всего выше написанного вы мало что или почти ничего не поняли. Во втором уроке будет больше практики, и вы сможете сами вручную все прописать и увидеть, как работает HTML.
Переходите к следующему уроку «Моя первая веб-страничка на HTML». Урок-2
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: html, основы
bloggood.ru
Основы языка WEB программирования HTML | Info-Comp.ru
Все пользуются Интернетом и все просматривают различные сайты, и, наверное, всем хотелось бы разместить свой сайт в Интернете, но это не просто так сделать, на это существует много причин. Однако для того чтобы Вы смогли разместить качественный сайт, Вам просто необходимо знать основу «WEB-программирования», которой и является язык HTML. В данной статье мы рассмотрим основные элементы, теги, атрибуты, даже напишем первую web страницу.
Hyper Text Markup Language — «HTML» (язык разметки гипертекста) многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого. Пользователь, освоивший этот язык, приобретает возможность делать серьезные вещи простыми методами и, главное, быстро, что в современном мире считается очень хорошо!
На языке HTML можно создавать собственные мультимедийные продукты и распространять их на cd-дисках, и все эти продукты, выполненные в виде наборов HTML-страниц, не требуют разработки специализированных программных средств, так как все необходимое для работы с данными (Web-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров.
Для того чтобы Вам было легче дальше понимать, о чем я с Вами говорю, давайте рассмотрим основные термины, которые употребляются в HTML:
- Элемент (element) — конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.
- Тег (tag) — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
- Атрибут (attribute) — параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
- Гиперссылка — часть текста, которая является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
- Фрейм (frame) — этот термин имеет два значения. Первое — область документа со своими полосами прокрутки. Второе значение — одно изображение в сложном (анимационном) графическом файле (похожее на кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».
- HTML-файл или HTML-страница — документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.
- Апплет (applet) — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
- Скрипт или сценарий (script) — программа, включенная в состав Web-страницы для расширения ее возможностей.
- Расширение (extension) — элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
- CGI (Common Gateway Interface) — общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.
- Код HTML — гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
- Web-страница — документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
- Сайт (site) — набор Web-страниц, расположенных в одном месте и связанных между собой.
- Браузер (browser) — программа для просмотра Web-страниц.
- Загрузка (downloading) — копирование файлов с сервера на компьютер-клиент.
- URL (Uniform Resource Locator) или универсальный указатель ресурса, адрес некоторого объекта в Интернете, т.е. типичный URL для WWW, имеет вид: http://www.название.домен/имя файла.
Все элементы языка можно условно разделить на три группы. К первой относятся элементы, которые создают структуру гипертекстового документа. Использование таких элементов — необходимая формальность, которой нельзя пренебрегать. Ко второй группе можно отнести элементы, создающие эффекты форматирования. Их использование диктуется конкретными требованиями к документу, фантазией и компетенцией разработчика, К третьей группе относятся элементы, которые позволяют управлять программными средствами, установленными и работающими на компьютере-клиенте. Часто такие элементы создаются автоматически, когда разработчик использует для вставки некоторого объекта в документ гипертекстовый редактор или подобную программу.
Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои Web-страницы при помощи программирования. Аплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.
Версии HTML
Первая версия языка HTML была разработана в начале 90-х годов Тимом БенерсЛи для одного из распространенных в прошлом браузера Mosaic. Но тогда ни для браузера, ни для самого HTML еще не нашлось хорошего применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Но распространение язык HTML получил благодаря версии 2.0, которая появилась в июне 1994 года. И с того момента происходят возрастание популярности WWW по всему миру. Стандарты, включенные в версию 2, настолько прижились что используются и по сей день.
HTML версия 3.0, которая появилась примерно год спустя, в ней была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д.) при помощи элементов языка. Но развитие этого проекта затормозилось и не получило дальнейшего распространения.
В 1996 году появился HTML версии 3.2. Это было блестящие решение, достаточно упомянуть, что в спецификацию языка были введены фреймы, которые стали теперь весьма популярными у разработчиков сайтов. И по сей день все браузеры поддерживают эту версию HTML.
Официальная спецификация HTML 4 (Dynamic HTML) разрабатывалась в 1997 год. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет web-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.
Структура Web-страницы
Ниже представлен код Web-страницы, который выполнен на языке HTML, и на примере этой страницы мы разберем ее структуру, но для начала скопируйте весь код в обычный текстовый блокнот и нажмите «Сохранить как» и сохраняйте уже файл с расширением html, т.е. после названия напишите .html
<! DOCTYPE HTML "-//W3C//DTD HTML4.01 Transitional//en"> <htмl> <head> <titlе>Структура web документа</title> <meta html-equiv="Content-Type"Content="text/html;charset=windows-1251"> <meta name="Keywords" content="softvt"> <meta name="discription" content="softvt"> </head> <body bgcolor = #FFFFFF> <a name ="list"></a> Переход в <a href="#list1">Конец документа</a> <p> Переход к <a href="#list2"><b>первая ссылка <b></a></p> <НR> <Н1>Заголовок 1</h2> <Н2>Заголовок 2</h3> <НЗ>Заголовок 3</h4> <Н4>Заголовок 4</h5> <Н5>Заголовок 5</h5> <Н6>Заголовок 6</h6> <НR> Здесь расположена <b>первая ссылка </b><а name ="list2"></a> <НR> <р>Здесь должен располагаться<br> основной текст web страницы. <br> А я, например, вставлю сюда <br>несколько переносов,<br> для того чтобы Вы могли<br> наглядно наблюдать,<br> как у Вас работает <br>ссылки внутри документа,<br> а то если у Вас будет большое разрешение,<br> Вы просто не заметите переход по ссылкам<br> <НR> <а name="list1"</a><p> Переход в <а href ="#list">Начало документа</a> </body> </html>
Для того чтобы понять структуру Web-страницы, необходимо рассмотреть все ее элементы, которые входят в приведенный выше код.
<html> </html>
Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все подобные документы.
<head> </head>
Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.
<title> </title>
Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Данный элемент очень сильно влияет на продвижение в поисковой системе т.к. поисковые системы уделяют особое внимание на тег TITLE. Мой совет: никогда не делаете очень длинный текст в этом теге (65 символов достаточно).
<МЕТА>
Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй — содержание.
<body><body>
Этот элемент объединяет в себе гипертекст, который определяет собственно Web-страницу. Это та видимая часть документа, которую разрабатывает авто страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце Web-страницы. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить много атрибутов, которые служат для установки всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных атрибутов данного тега, который оказывает свое влияние на дизайн страницы это
background=»путь к файлу фона»
Более простое оформление фона сводится к заданию его цвета
bgcolor=»#FFFFFF»
Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов (rbg).
Так как можно изменить фон страницы можно и изменить цвет текста. Для этого имеется следующий атрибут
text=» #RRGGBB»
Для задания цвета текста гиперссылок используется следующий атрибут
link=»#RRGGBB»
Можно также указать изменение цвета для последней выбранной пользователем гиперссылки
Tiling «#RRGGBB»
Далее рассмотрим заголовки.
<Н1></h2>
Элемент заголовка. Различают шесть уровней заголовков, которые обозначаются следующим образом.
<Н1>Заголовок</h2>
<Н2>Заголовок</h3>
<Н3>Заголовок</h4>
<Н4>Заголовок</h5>
<Н5>Заголовок</H5>
<Н6>Заголовок</H6>
Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:
align=»left» align=»center» align=»right»
Для создания нового абзаца используется тэг <p>, а для перехода на новую строчку без создания абзаца — тэг <BR> т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если Вы не используете в тэге <p> элемент ALIGN, которым может задавать выравнивание абзаца:
<p ALIGN=LEFT>По левому краю</p> <p ALIGN=CENTER>По центру</p> <p ALIGN=RIGHT>По правому краю</p> <p ALIGN=JUSTIFY>Текст, находящийся между этими элементами выравнивается по ширине</p>
<НR>
Горизонтальная линия (horizontal rule) — очень распространенный элемент. Во-первых, потому что с его помощью очень легко и удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но имеет ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
- align=»left»
- align=»center»
- align=»right»
- align=»justify»
<a> </а>
HTML-документ может быть очень громоздким, и не очень удобный пользователю у которого возникает необходимость быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Для этого в нужных местах текста расставить соответствующие метки.
<а name=»метка»>Произвольный текст</a>
В этом случае данной строке документа присваивается имя, и, следовательно, другой части документа или даже на другом документе может быть создана гиперссылка, приводящая к этой метки.
Для вставки изображений (картинки) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега):
<IМG SRC=»Рисунок» BORDER=»0″ ALIGN=»Выравнивание» WIDTH=»Ширина» HEIGHT=»Высота» HSPACE=»Отступ_1″ VSPACE=»Отступ_2″ ALT=»Подсказка» NAME=»Имя» LOWSRC=»Рисунок_2″>
Списки
(list) были разработаны в HTML, несомненно, под влиянием успеха текстовых редакторов. От обычного текста список отличается, прежде всего, тем, что пользователю не нужно думать о нумерации его пунктов: эту задачу HTML берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация продолжается автоматически. В случае ненумерованных списков HTML ставит перед каждым пунктом отметки: кружки, прямоугольники, ромбы и другие изображения. В конечном итоге список принимает приличный, вид. Существует две группы таких тегов: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько видов списков.
<ul> <li> </ul>
Самым распространенным является ненумерованный список (unordered list). Он представлен ниже:
<ul> <li>Пункт 1 списка</li> <li>Пункт 2 списка</li> <li>Пункт 3 списка</li> </ul>
Элемент ul является своеобразным выделением списка. Он позволяет разделять один список от другого. Элемент liобозначает каждый из пунктов.
Таблицы
Являются одним из самых необходимых средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер прорисовку всей таблицы берет на себя. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. По мимо всего прочего, таблицы позволяют решать многие дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и так далее. При создании таблиц применяется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов располагаются элементы для описания каждой ячейки в строке (ТD,ТН).
Для того чтобы разобраться в структуре существующей таблицы или разработать новую таблицу, существует одно правило, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE указан элемент TR, это указывает на то, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек), другая таблица и так далее. После того как появится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега </table>).
Таблицу можно выровнять по горизонтали при помощи атрибута align:
- align=»left» — влево;
- align=»center» — по центру;
- align=» right» — вправо.
Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например: width=400 или width=50%
Для управления видом рамки используются два атрибута. Дело в том, что браузер создает изображение рамки, имитируя ее трехмерность (выпуклость) при помощи различия в освещенности граней
Сценарии
Практически все web – мастера хотят, чтобы их страницы на сайте имели современный вид, были многофункциональными, красивыми и динамичными. Стандартными средствами HTML это невозможно, поэтому применяются разные средства: апплеты, объекты, каскадные таблицы стилей и так далее. Но самым популярным и распространенным видом (приемом) является использование сценариев.
Сценарий — это программный код, который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript), разработанном фирмой Microsoft.
<script> </script>
Данный тег позволяет отделить текст программы-сценария от другой информации страницы. Тег SCRIPT обязательно включает в себя атрибут language, который определяет язык и может принимать следующие значения:
- javascript — код на языке JavaScript;
- vbscript — код на языке VBScript.
Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы не нарушать все правила, внутри элемента можно поместить такое определение:
type=»text/javascript»
Одной из самых прикольных особенностей сценариев является возможность изменения содержимого страницы в результате выполнения программы. Но это только особеность, а не правило. С помощью атрибута defer (который не принимает никаких значений) можно «сказать» браузеру, что таких изменений внесено, не будет. В некоторые случаях это позволяет ускорить загрузку страницы.
Из стандартных атрибутов можно использовать атрибут charset.
Тег SCRIPT (или ряд таких элементов) может располагаться как внутри элемента HEAD, так и внутри элемента BODY. Если сценарий находится внутри элемента BODY, возможна и такая ситуация, когда какой-нибудь браузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран. Чтобы этого не случилось, код сценария вводят как комментарий:
— <SCRIРT language =»язык»>
— <!— Все, что относится к коду сценария —>
— </script>
Все современные браузеры распознают этот прием и игнорируют символы комментария. Если в тексте сценария нужно ввести комментарий, то для этого используют иное обозначение: в начале строки вводят два слеша //.
Программный код сценария выполняется в момент загрузки страницы, т.е. когда на экране еще видно ее содержание. Ниже представлен пример простейшего сценария (вывод сообщения в окне).
— <html>
— <head>
— <METА http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
— <TITLE>Просто сценарий</TITLE>
— <script language=»javascript»>
— alert(«Вы написали свой первый сценарий!»)
— </script>
— </head>
— </bоdy>
— </html>
Это простая страница, но она включает сценарий из одной строки. С помощью метода alert перед загрузкой выводится сообщение. И оно будет висеть до тех пор, пока пользователь не нажмет на кнопку ОК, загрузка не будет продолжена.
Возможен случай, например страница, будет просматриваться в браузере, не поддерживающем сценариев, для этого предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими методами. Для начала, внутри него можно показать объявление наподобие следующего: «Ваш браузер не может выполнить сценарий, необходимый для просмотра этой web-страницы!» Во-вторых, внутри элемента можно разработать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой HTML-документ. Элемент NOSCRIPT должен обязательно снабжаться конечным тегом.
Вот мы с Вами и рассмотрели основы такого языка WEB-программирования как HTML. Даже после прочтения этой небольшой статьи Вы уже имеете представление, и даже возможность программировать на этом языке. Желаю удачи!
info-comp.ru
HTML для новичков: основы создания простых сайтов
Доброго времени суток, читатели блога. В этой статье я хочу поделиться некоторыми знаниями в популярной на сегодняшнее время области – верстка сайтов, а точнее с конкретным механизмом ее создания. После прочтения каждый из вас сможет «познать дзен» html для новичков!
Вы узнаете для чего был создан данный язык, познакомитесь с основными элементами html, при желании по примерам опробуете его на практике, а под конец статьи даже сможете создавать простые одностраничные сайты. Приступим же…
Приятно познакомиться, меня зовут html
HTML означает Hyper Text Markup Language, что дословно переводится как «язык гипертекстовой разметки». Стоит знать, что html нельзя назвать языком программирования, так как его основная направленность не обработка данных, а всего лишь их корректное отображение в браузере.
HTML – это специальный механизм для верстки (создания) интернет-страниц. С его помощью разработчик или, как модно сейчас говорить, верстальщик задает структуру и внешний вид страниц сайта, определяет, какие элементы и каким образом будут располагаться на нем.
Вместе с html всегда действует css и его фреймворки – формальный язык, содержащий в себе набор параметров для изменения вида, форм, цветов, размеров и других параметров объектов. Но об этом я подробно напишу в своих других статьях, так что оставайтесь на линии. ))
Язык html был разработан в конце ХХ века британцем Тимом Бернерсом-Ли. Изначально он был создан как инструмент для форматирования документов и научных бумаг людьми, не обученными верстать или работать в специальных программах. Однако с течением времени его предназначение изменилось, впрочем, как и предназначение некоторых встроенных элементов.
Немного о «мутациях» html в html5
Последние пару лет споры и обсуждения нового стандарта разметки достигли апогея. HTML 5 – это современная спецификация разметки, которая направлена на верстку веб-приложений, использующих такие файлы, как видео, графику, всевозможные виды анимации, аудио и другие.
Опять-таки хочу выделить одну маленькую, но весьма важную деталь. HTML 5 никак нельзя назвать продолжением старой спецификации. Несмотря на схожесть с описываемым мною до этого механизмом, это скорее новая публичная платформа, которая только, возможно, ради рекламных целей в состав своего названия включила знаменитую аббревиатуру.
Что такое теги и почему они так необходимы
Вот теперь мы ближе подошли к самому обучению, возможно начинающих верстальщиков. Итак, что же такое тег? Тег – это такая единица веб-языка, благодаря которой разработчик указывает, какой именно элемент будет использовать на своем сайте.
Теги бывают двух видов: одиночные и парные (в некоторых источниках можете встретить еще одно название – контейнеры). Они обладают одинаковым синтаксисом с одним различием: парные теги могут включать в себя текстовую информацию или другие теги и обязательно в конце должны закрываться.
Вот так выглядит общая форма одиночного тега:
<тег1 атрибут1=»значение» атрибут2=»значение»>, а вот такой синтаксис у контейнеров: <тег1 атрибут1=»значение» атрибут2=»значение»>Здесь может не быть информации или же может быть введен текст</тег1>.
Все существующие теги для лучшего представления общей картины можно приблизительно поделить на восемь групп:
- Теги, необходимые для обязательного верхнего уровня;
- Теги, предназначенные для заголовков;
- Блочные единицы;
- Универсальные;
- Строчные элементы;
- Элементы представления таблиц;
- Различные виды списков;
- Фреймы
Для удобства я занес важные элементы в таблицу тегов, с разбором и подробным описанием каждого.
Верхний уровень
Это обязательные теги, без которых браузер корректно не отобразит написанную вами страничку | |
| <html></html> | Включает в себя все последующие элементы и содержимое. Указывает, что данный файл является html-документом |
| <head></head> | Вводится информация, которая в дальнейшем не отображается в теле документа (название и хештеги) |
| <body></body> | Определяет видимую часть тела файла. В этой части располагаются графическая информация, текст, таблицы, ссылки, списки и т.д. |
Заголовок документа Определяют название страницы и хранят информацию для поисковых систем браузера | |
| <title></title> | Отвечает за название документа |
| <meta> | Хранит в себе важную информацию для поисковых систем сети |
Блочные единицы Занимают доступную ширину отображаемой страницы и всегда начинаются с новой строки | |
| <div></div> | Универсальный элемент. Используется для разметки больших блоков текста и создания отдельных блоков страниц (блочная верстка) |
| <h2>,…,<h6> | Парные теги заголовков |
| <p></p> | Используется для создания параграфов |
Списки | |
| <ol></ol> | Создает нумерованный список |
| <li></li> | Определяет отдельную часть списка |
| <ul></ul> | Создает ненумерованный список |
Таблица | |
| <table></table> | Задает таблицу |
| <tr></tr> | Определяет строку таблицы |
| <th></th> | Определяет шапку страницы |
| <td></td> | Определяет ячейки таблицы |
Строчные единицы Это теги, которые входят в состав других элементов языка | |
| <a></a> | С его помощью создаются анкоры (ссылки) |
| <b></b> | Задает жирный шрифт текста |
| <i></i> | Задает курсивный шрифт |
| <img> | Элемент, предназначенный для отображения графической информации (gif, png, jpg и bmp) |
Бесспорно, для детального изучения данной области вам стоит заглянуть в книги бесплатного доступа или самоучители.
Время для примера
Для выполнения данного задания вам необходимы такие инструменты:
- Обычный текстовый редактор;
- Браузер
Откройте стандартную программу «Блокнот» и вставьте туда данный текст:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML Document</title> </head> <body> <h2>Моя первая страница</h2> <p> Первое предложение выделим <b>жирным текстом</b>. А второе – <i>курсивом</i>.</p> </body> </html> |
<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>HTML Document</title> </head> <body> <h2>Моя первая страница</h2> <p> Первое предложение выделим <b>жирным текстом</b>. А второе – <i>курсивом</i>.</p> </body> </html>
При сохранении файла обязательно укажите кодировку файла «UTF-8» в меню «Файл» — «Сохранить как» и в названии добавьте расширение .html. Теперь откройте его через любой браузер и наслаждайтесь своей первой страничкой.
Надеюсь данная статья была полезной. Не забудьте подписаться на обновления блога и поделиться с друзьями вашими впечатлениями. Пока-пока!
С уважением, Роман Чуешов
Загрузка…Прочитано: 362 раз
romanchueshov.ru