Простой сайт на html пример – Шаблон сайта на чистом HTML

23.10.2018 alexxlab

Содержание

Как сделать веб страницу html с картинкой для чайников

для чайников

Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.

HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).

То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги).

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

Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”. Для этого нам понадобится любой текстовый редактор. Я вам посоветую «Notepad++». Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами.
Это будет выглядеть так:
«page.html»

И так, открываем наш редактор, и пишем следующий код:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета

</body>
</html>

Сохраняем созданный текст.
Для просмотра созданной страницы html в любом браузере, нужно просто кликнуть на пиктограмме «page.html».

Вставить картинку в html страницу

Чтоб вставить картинку в html страницу, её необходимо предварительно подготовить.
Выбираем нужное изображение, редактируем его либо в документе Word (простой вариант), либо в Photoshop.
Сохраняем картинку в формате JPEG, в нашей папке для создания страниц html.
Пример:
название папки: user_page
в этой папке:
страница: page.html
картинка: kartinka.jpg

Для вставки картинки в страницу применяется тег <img>.
Для указания пути к картинке в теге используется параметр src=
Вот так будет выглядеть код html, при помощи которого можно вставить картинку в страницу html:
<img src=»/kartinka.jpg»> (при условии: страница и картинка находятся в одной папке).

А это код страницы html с картинкой

</body>
</html>

Если вы выполнили все так, то в браузере будет отражен результат вашей работы.
Оказывается, сделать html страницу совсем не сложно!

Ниже приведены атрибуты для тега <img>, и их предназначение:

<img src=»/kartinka.jpg»>	Без атрибутов — текст по умолчанию находится снизу картинки
<img src=»/kartinka.jpg» align=»right»>	align=»right» — картинка справа, текст слева
<img src=»/kartinka.jpg» align=»left»>	align=»left» — картинка слева, текст обтекает справа
<img src=»/kartinka.jpg» align=»bottom»>	align=»bottom» — как и по умолчанию, текст внизу картинки
<img src=»/kartinka.jpg» align=»middle»>	align=»middle» — текст посередине картинки
<img src=»/kartinka.jpg» align=»top»>	align=»top» — текст вверху картинки
<img src=»/kartinka.jpg» vspace=»10″>	vspace — задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel — самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).
<img src=»/kartinka.jpg» hspace=»20″>	hspace — задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)
<img src=»/kartinka.jpg» alt=»Сайт для сайтостроителей»>	alt — задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись «Сайт для сайтостроителей». Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).
<img src=»/uzeron_pc.jpg»>	width — задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!)
<img src=»/uzeron_pc.jpg»>	height — задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!)
<img src=»/uzeron_pc.jpg» border=»0″>	border — задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.
<p align=»center»><img src=»/uzeron_pc.jpg»> </p>	<p></p> — размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например: align=»left» — слева align=»center» — в центре align=»right» — справа
<body bgcolor=»#000000″ background= «uzeron_pc.jpg»></body>	background=»Ваш_фон.jpg»- Ваша картинка будет фоном HTML странички. В атрибуте background=»Ваш_фон.jpg» нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.

Добавить комментарий

www.sitedelkino.ru

Как создать сайт в блокноте HTML — пример и инструкция

1.Создайте текстовый документ.

2.По желанию переименуйте файл (у меня он будет называться first-page) и обязательно задайте ему расширение .html вместо .txt).

3.Откройте документ программой Блокнот, Notepad, Notepad++ или другом текстовом редакторе, желательно с подсветкой синтаксиса.

4.Скопируйте и вставьте в него следующий текст.

<!DOCTYPE html>
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Тело HTML-документа (отображается на экране)
</body>
</html>

5. Сохраните изменения в файле.

6. Откройте first-page.html, только уже не в Блокноте, а в любом доступном вам браузере. На экране должно отобразиться примерно следующее:

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

Теперь проверьте, правильно ли вы этот код поняли. Рассмотрим его.

Это тег, с которого должен начинаться любой html-документ. Он даёт понять интернет-обозревателю, с какой версией языка разметки тот имеет дело. Без этой строки браузер может начать неправильно обрабатывать код. Написав , мы идентифицировали файл как документ стандарта HTML 5, и браузер, проанализировав первую строку, будет обрабатывать остальной код в соответствии с заданным стандартом.

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

«Head» с английского — «Голова». Этот контейнер содержит теги со вспомогательной информацией для веб-браузеров и поисковых систем. Здесь можно задать файлы скриптов, таблицы стилей, ключевые слова и

<title>Моя первая страничка</title>

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

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

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

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

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

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

Полезные ссылки:

www.seostop.ru

20 самых красивых и творческих сайтов на HTML5

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

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

Сегодня я представляю Вам несколько примеров таких сайтв, которые используют практически все возможности HTML5. Я уверен, что после просмотра вдохновение аж зашкалит 🙂 Наслаждайтесь.

Возможно Вам будут интересны вот эти подборки:

Интересный сайт сделанный с помощью HTML 5. Вам нужно добавить усы к видео на котором находятся разнообразные герои. Это как оказалось не очень и просто сделать 🙂

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

Наверное самые красивые иллюстрации на сайте Швейцарского часового. Очень красиво, просто сказочно. И естественно этот сайт сделан на самых новых технологиях HTML5 и JQuery.

Довольно необычный сайт с 3d графикой рок — певицы Бьёрк (Bjork). Красивые 3d элементы добавляют необыкновенную объёмность сайту, в общем нужно зайти и посмотреть.

Необычный сайт на HTML5, в котором нужно переместить компакт диск в указанное место и смотреть видео ролики. Идея просто супер, и очень удобно.

Супер веб — сайт Джеймса Андерсона, который очень любит игру крикет, и таким образом сделал сайт — инфографику с красивой и «живой» статистикой игры.

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

Если Вы всё время мечтали научится играть на пианино, то не упустите свой шанс и попробуйте. Правда это довольно необычное пианино, но очень красивое и креативное 🙂

Наглядный пример использования Flash технологий в HTML5. Очень красиво, удобно, и конечно же очень развлекательно.

www.the-bea.st

Замечательный пример творческого сайта, который наглядно показывает все возможности HTML5. Прекрасная и качественная анимация и красивые иллюстрации.

Классный сайт на котором можно посмотреть разнообразные видео со всей планеты. И конечно же этот сайт отчётливо подчёркивает огромные возможности HTML5.

Это стильный цифровой комикс, воплощённый в жизнь с помощью HTML5. Этот сайт доставит огромное удовольствие поклонникам книги.

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

beta.theexpressiveweb.com

Классный справочник, который был создан компанией Adobe, в котором представлены разные полезности, например как CSS3 анимация и т.д.

Сайт, который показывает использование видео на сайте с помощью HTML5. Создатель видео Крис Молоко, он же и создал этот сайт со своими друзьями из Гугл.

Очень интересный пример использования видео через HTML5, это своеобразный пазл который нужно просто собрать 🙂 Попробуйте, Вам понравится.

Супер пример использования параллакса, HTML5 и JQuery в веб дизайне.

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

Классный сайт на HTML5. Называется он Счастливый отпуск, я думаю, что тут не нужно подробностей.

Это популярный сайт радиостанции, который использует технологии HTML5, JQuery и плавные переходы с красивой анимацией на CSS3.

Огромное спасибо speckyboy.com

beloweb.ru

Создание сайта на HTML

Здравствуйте, меня зовут Михаил Русаков!

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

Я склонен полагать, что у Вас имеется большое желание научиться создавать свои собственные сайты. Разумеется, крайне глупо пытаться познать эту науку с изучения какого-нибудь PHP. Гораздо разумнее начать с чего-нибудь попроще, а именно с HTML (HyperText Markup Language — язык гипертекстовой разметки) — базового языка, на котором и построен любой, даже самый сложный сайт. Без этого языка не было бы ни одного сайта, более того, HTML — простейший язык, который может освоить даже школьник (яркий пример — Ваш покорный слуга, начавший осваивать HTML ещё в школе, причём весьма успешно).

Ладно, хватит болтовни — пора приступать к созданию нашего с Вами первого сайта, и этот процесс будет называться: «Создание сайта на HTML».

Первое, что нужно решить: где создавать сайт? Разумеется, можно и в обычном блокноте. Но это несерьёзно (мы так в школе писали), поэтому давайте лучше будем использовать что-нибудь «потяжелее». Я остановил свой выбор на редакторе «Notepad++» — замечательная программа, которая позволяет писать код на огромном количестве языков, в том плане, что это будет весьма и весьма удобно. Не буду сильно её хвалить, потому что для написания кода для серьёзных языков (Java, C++ и т. д.) она не подходит — много лишних проблем возникнет. Но для таких языков, как HTML, CSS, JavaScript и даже PHP — очень хороший выбор.

Скачать Notepad++ можно, пройдя по этой ссылке: http://notepad-plus.sourceforge.net/ru/site.htm

Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index.html. Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора:

<html>
<head>
</head>
<body>
</body>
</html>

Написали? Сохранили? Поздравляю Вас, Вы только что создали самую простую (но очень важную!!!) HTML-страницу!

Теперь можно нашу страницу открыть в браузере. Так и поступим.

Что-нибудь видите? Я уверен, что нет. И это неудивительно, ведь это самая элементарная страница. Вы можете посмотреть исходник страницы. Для этого в меню «Вид» выберите пункт меню «Просмотр HTML кода«, «Исходный код страницы» или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код.

А теперь давайте обсудим, что мы здесь написали.

<html>, <head>, <body> — это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать.

</html>, </head>, </body> — это закрывающие теги.

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

Одиночные теги — это теги, которые не требуют наличие закрывающего тега.

Теперь что касается назначения данных тегов.

Тег <html> означает начало HTML-документа.

Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже.

Тег </head> означает конец заголовка HTML-документа.

Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете — всё расположено в теге <body>.

Тег </body> означает конец содержимого документа.

Тег </html> означает конец HTML-страницы.

Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код:

<title>Наша страница</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера.

Тег </title> сообщает, что здесь заголовок заканчивается.

Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид:

Название = «значение».

Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит.

Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы — значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>:

<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>

Теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6> — выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст. Таким образом, код Вашей страницы имеет вид:

<html>
<head>
  <title>Наша страница</title>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251">
</head>
<body>
  <h2>Заголовок 1-го уровня</h2>
  <h3>Заголовок 2-го уровня</h3>
  <h4>Заголовок 3-го уровня</h4>
  <h5>Заголовок 4-го уровня</h5>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере.

Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый).

Таким образом, тег <body> выглядит так:

<body text = "green" bgcolor = "yellow">
  <h2>Заголовок 1-го уровня</h2>
  <h3>Заголовок 2-го уровня</h3>
  <h4>Заголовок 3-го уровня</h4>
  <h5>Заголовок 4-го уровня</h5>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным.

Думаю, что на сегодня хватит для Вас материала. Очень полезно будет потренироваться в выводе разного текста, разными цветами.

Увидимся в следующей статье!

С уважением, Михаил Русаков.

P.S. Бесплатный курс по HTML: http://srs.myrusakov.ru/html

Создано 21.04.2010 19:53:46
Михаил Русаков

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

myrusakov.ru

Создание простой web-страницы на HTML

Что такое HTML? Из описания: HTML — язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением .html (название должно быть на английском языке — например index.html). Что бы создать такой файл — создайте обычный текстовый документ («Пуск» — «Все программы» — «Стандартные» — «Блокнот») и сохраните («Файл» — «Сохранить как») его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла — «Все файлы(*.*)»).

Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем — index.

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

<html> 
 <body>  
  Это первая web-страница! 
 </body>
</html>

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст «Это первая web-страница!» можете поменять на любой другой, например так — «Это моя первая web-страница!!!». сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Надо это исправить — немного подправим код, вернее добавим в него «Голову сайта», используя теги <head> и <title>.

<html> 
 <head>  
  <title>Первая страница</title> 
 </head> 
 <body>  
  Это моя первая web-страница!!! 
 </body>
</html>

Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.

Пример здесь.

Описание тегов.

Самый первый тег это <html> (этот тег парный, т.е. закрывающий тег </html> обязателен) — он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег (<html> и </html>) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.

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

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

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

В следующем уроке мы поговорим о видах тегов и правило их написания.

Список уроков Описание тегов

in-sites.ru

Примеры создания простейших Web-страниц. Создание элементов диалога (кнопок и др.)

В Интернете есть сайты, размещающие домашние web-странички бесплатно,

например http://www.chat.ru/ (до 20 Мб), http://www.narod.ru/ (до 100 Мб),

http://www.boom.ru/ (до 50 Мб), http://www.fortunecity.com/ (до 100 Мб).

Для размещения страничек используют броузеры Internet Explorer 4.0-5.5, Netscape

Communicator 3.0 — 4.7, Opera 3.60-5.0, а также ftp-броузеры CuteFTP или LeechFTP.

Есть сайты, например http://www.da.ru/, http://www.jump.ru/, позволяющие бесплатно

получать удобные короткие адреса страниц.

Вопросы создания элементов диалога (кнопок и других) рассмотены в

Примере 6 и 7.

Рассмотрим примеры создания простейших Web-страниц.

Пример 1.

<HTML>

<HEAD>

<TITLE>Название документа</TITLE>

</HEAD>

Здесь расположен сам Web-документ.

<CENTER><h2><font color=»yellow»>Всем привет!</h2></CENTER></font><P>

<CENTER><font color=»red» size=4>Здравствуй, мир!</CENTER></font>

</BODY>

</HTML>

Здесь атрибут size=4 задает размер шрифта.

Пример 2.

<HTML>

<HEAD>

<TITLE>Поисковые системы Internet.</TITLE>

</HEAD><BODY bgcolor=»navy» text=»yellow»>

<big><i><U>Поисковые системы в Интернете</i></big></U></CENTER>

<font color=»white»>Ниже приведены некоторые популярные зарубежные

поисковые системы и отечественная система Rambler. Для поиска

информации используется окно Search, в которое вводится ключевое

слово и нажимается кнопка Search.<br></font>

Просмотрите примеры:

<a href=»altavist.HTM»>ALTAVIST.HTM</a>,

<a href=»EXCITE.HTM»>EXCITE.HTM</a>,

<a href=»YAHOO.HTM»>YAHOO.HTM</a>!

1.<IMG SRC=»altavist.gif»>

2.<IMG SRC=»yahoo.gif»>

3.<IMG SRC=»excite.gif»>

4.<IMG SRC=»lycos.gif»><P>

5.<IMG SRC=»infoseek.gif»>

6.<IMG SRC=»rambler.gif»><hr color=»lime»>

<tt><big><U><font color=»aqua»>Используйте поисковые системы для

поиска информации в Интернете!</tt></big></U></font>

</BODY>

</HTML>

Пример 3.

<HTML>

<HEAD>

<TITLE>Эхо Москвы.</TITLE>

</HEAD>

<CENTER><u><font color=»yellow»>24 часа в сутки!</u></font><br>

Информация на любые темы!

<font color=»aqua»>Частота на УКВ 73,82 МГц или 91,2 МГц FM.<p></font>

<i><big><font color=»white»>Слушайте Эхо Москвы!

Остальное видимость!<br></i></big></font>

Адрес в Интернете:

</BODY>

</HTML>

Пример 4.

<HTML>

<HEAD>

<TITLE>Упорядоченные и неупорядоченные списки</TITLE>

</HEAD>

<h4><U>Неупорядоченный список</h4></U>

<UL>

<LI>Элемент 1.

<LI>Элемент 2.

<LI>Элемент 3.

</UL>

<h4><U>Упорядоченный нумерованный список</h4></U>

<OL>

<LI>Элемент 1.

<LI>Элемент 2.

<LI>Элемент 3.

</OL>

</BODY>

</HTML>

Пример 5.

<HTML>

<HEAD>

<TITLE>Списки определений</TITLE>

</HEAD>

<h4><u>Списки определений имеют вид:</h4></u>

<DL>

<DT>Название термина 1

<DD>Определение термина 1

<DD>Другое определение термина 1

<DT>Название термина 2

<DD>Определение термина 2

<DD>Другое определение термина 2

<DT>Название термина 3

<DD>Определение термина 3

<DD>Другое определение термина 3

</DL>

Петров И.C., E-mail: [email protected]

</address>

</BODY>

</HTML>

Тег <address> используется для введения адреса электронной почты

E-mail.

Пример 6.

Элементы диалога (кнопки, области для ввода текста).

<HTML>

<HEAD>

<TITLE>Формы</TITLE></HEAD>

<BASE>

<FORM>

<CENTER><FONT size=6>Элементы диалога</font></center>

<Н2>Элемент ISINDEX</h3>

<Н2>Элементы INPUT</h3>

<h4> Ввод текстовой строки </h4>

<h4> Ввод пароля </h4>

<h4> Флажки </h4>

<h4> Переключатели </h4>

<h4> Кнопка подтверждения ввода </h4>

<h4> Кнопка с изображением </h4>

<h4> Кнопка очистки формы </h4>

<Н2>Элемент SELECT

<OPTION value=а>Первый

<OPTION value=Ь>Второй

<OPTION value=с>Третий

<OPTION value=d>Четвертый

</select></h3>

<Н2>Элемент TEXTAREA

Область для ввода текста

</textarea></h3>

</FORM>

</BODY></HTML>

Пример 6 с элементамт диалога.

Элементы диалога

<Н2>Элемент ISINDEX

<Н2>Элементы INPUT
Ввод текстовой строки

Ввод пароля

Флажки

Переключатели

Кнопка подтверждения ввода

Кнопка с изображением

Кнопка очистки формы

Файл

<Н2>Элемент SELECT

<Н2>Элемент TEXTAREA Область для ввода текста

Пример 7.

Скрипт.

Программа на языке JavaScript позволяет осуществлять запуск

любой программы или переход к любому файлу при нажатии кнопки.

Здесь mark1() — метка. Для разных кнопок и разных команд надо

указывать разные метки. В данном примере при нажатии кнопки

запускается калькулятор.

<!—

function mark1(){

window.location.href=»/windows/calc.exe»;

}

//—>

</script>

В данном примере при нажатии кнопки просматривается картинка lycos.gif (для Internet Explorer).

Пример 8.

Три вертикальных фрейма.

<html>

</noframes>

</frameset>

</html>

Пример 9.

Три горизонтальных фрейма.

<html>

<!— For browsers that don’t support frames —>

</noframes>

</frameset>

</html>

Пример 10.

Два вертикальных и два горизонтальных фрейма.

<html>

</noframes>

</frameset>

</html>

www.examen.ru

Создание Web-сайта на языке HTML. Учебное пособие

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

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

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

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

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

Задачи.

Обучающие:

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

Развивающие:
развить творческие способности к самовыражению, посредством создания сайтов;

сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;

развить навыки работы на компьютере

Воспитательные:
воспитать добросовестное отношение к работе;

воспитать чувства товарищества и личной ответственности за созданный сайт;

воспитать художественный и эстетический вкус;

воспитать грамотного и корректного пользователя сети Интернет.

Урок 1
1. Общие сведения о Web-сайтах и языке HTML
Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

HTML – Hyper Text Markup Language — язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>…</> и бывают парные и непарные (одиночные <>).

Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

2. Структура HTML-документа

<HTML>

<HEAD>

Секция заголовка
Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.

</HEAD>

<BODY>

Тело документа

Содержит непосредственно информацию страницы: тексты, рисунки, таблицы

</BODY>

</HTML>

3. Форматирование символов
Символы, заключенные между следующими тегами отображают:

<B>….</B> — полужирный шрифт<I>……</I> — курсивный шрифт
<U>……</U> — подчеркнутый шрифт
<SUB>…</SUB> — нижний индекс<SUP>…</SUP> — верхний индекс

Параметры шрифта
Текст, заключенный между тегами <FONT….> ……..</FONT> имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.
Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить   — символьный примитив.
Одиночный тег <BR> разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

4. Практическое задание №1.
Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

Урок №2

1. Форматирование текста по абзацам
Тег <P> …</P> — начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

Выравнивание текста по абзацам:

<P ALIGN=CENTER> …</P> — по центру<P ALIGN=JUSTIFY>…</P> — по ширине
<P ALIGN=LEFT>… </P> — по левому краю<P ALIGN=RIGHT>…</P> — по правому краю

2. Задание цвета всего текста и фона документа
Описываются в начальном теге тела документа <BODY>
<BODY BGCOLOR=цвет фона документа TEXT=цвет текста >.
3. Заголовки разных уровней
Тегами <H_n>….</H_n> оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги <H_n>….</H_n> могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.
4. Простые списки

<UL>……</UL> - неупорядоченный (ненумерованный) список<OL>……</OL> — упорядоченный (нумерованный) список

Часть текста, которая будет оформляться как список, заключается в соответствующие теги, а каждый элемент списка помечается одиночным тегом <LI>
Виды нумераций списков:
<OL TYPE=»Square»>

<OL TYPE=»Circle»>

<OL TYPE=»Disk»>

<OL TYPE=»A»>

<OL TYPE=»I»>

5. Практичекое задание №2
Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

Урок №3

1. Вставка графических изображений
Всеми браузерами поддерживаются форматы .gif, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.
Одиночный тег <IMG> вставляет графические изображения в текстовый поток в любом месте:

<IMG SRC=’имя графического файла’>
Необязательные атрибуты тега <img>:
ALT = альтернативный текстBORDER = толщина обрамляющей рамки в пикс., 0 нет рамки
HEIGHT = высота изображения в пикселах или %
WIDTH = ширина изображения в пикселах или %
HSPACE = свободное пространство слева и справа от изображения в пикселах или %VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или %
ALIGN = left, right, middle выравнивание изображения

Чтобы рисунок был по центру, можно использовать тег <CENTER>…….<CENTER>/

2. Практическое задание №3
Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

Урок №4

1. Гиперссылки
Связь с другими документами организуется тегами <A>…</A>.
<A HREF=”имя файла на который надо перейти” > текст гиперссылки </A>.
Рисунок так же можно сделать, как гиперссылку, написав:

<A HREF =’имя файла на который переходим’>< IMG SRC =’имя графического файла’></a>
2. Практическое задание №4
Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

Урок №5

1. Таблицы
Используют н
urok.1sept.ru

Простой сайт на html пример – Шаблон сайта на чистом HTML

Как сделать веб страницу html с картинкой для чайников

для чайников

Добавить комментарий

Как создать сайт в блокноте HTML — пример и инструкция

20 самых красивых и творческих сайтов на HTML5

www.the-bea.st

beta.theexpressiveweb.com

Создание сайта на HTML

Создание простой web-страницы на HTML

Описание тегов.

Примеры создания простейших Web-страниц. Создание элементов диалога (кнопок и др.)

Создание Web-сайта на языке HTML. Учебное пособие

Урок 1

Урок №2

Урок №3

Урок №4

Урок №5

Добавить комментарий Отменить ответ