Title компьютер title - создание сайта в блокноте.
Не привычный заголовок для статьи? Речь пойдёт не о компьютерах, речь в статье пойдёт об элементарном HTML-сайте. Рассмотрим то, как с помощью блокнота, встроенного в стандартный пакет программ для Windows, создать простой сайт.
Создание WEB-сайта «Компьютер»
Создадим элементарный сайт на HTML про компьютеры. Пусть это будет WEB-сайт про персональный компьютер, на котором мы хотим рассказать о том, что такое Персональный Компьютер (ПК), создадим соответствующие страницы: главную, страницу о программном обеспечении и о компьютерных терминах. Начнём создавать сайт с самого начала, для этого нажимаем на меню компьютера «Пуск» — «Все программы» — «Стандартные» — «Блокнот», запускаем блокнот и начинаем разбираться с программированием сайта.
Самое первое в создании сайта
Итак, мы хотим создать свой сайт с помощью блокнота. Для этого следует знать, что WEB-страница формируется с помощью специальных тегов. Теги должны быть заключены в угловые скобки, представляющие из себя знаки больше или меньше. Теги страницы могут быть парными или одиночными. Парные теги должны иметь открывающий и закрывающий тег — всё вместе это называется контейнер. Например, два тега
— это контейнер.
Закрывающий тег от открывающего отличается тем, что перед ним обязательно указывается прямой слэш, то есть знак «/». Все теги могут быть записаны как с помощью прописных, так и с помощью строчных букв.
Весь html-код страницы должен быть помещён внутри контейнера
Без указания этих тегов браузеры не смогут правильно интерпретировать содержимое страницы.
Далее что следует знать — web-страницы делятся на две логические части. Это заголовок и содержимое.
Заголовок страницы и TITLE
Есть такой контейнер
— это заголовок WEB-страницы. Заголовок содержит в себе название документа и некоторую справочную информацию о данной странице. Это может быть информация об используемой кодировке, указание не файл стилей, об используемом программном обеспечении сайта и так далее. Пока что эта информация нам не особо полезна.
Также есть специальный контейнер
— между этим открывающим и закрывающим тегом указывается название веб-страницы. Данное название отображается в строке заголовка браузера. Допусти, указав
<ТIТLE>Компьютер</ТIТLЕ> |
мы увидим в заголовке в браузере название «Компьютер».
Итак, заголовок нашей страницы принимает такой вид:
<HEAD> <ТIТLE>Компьютер</ТIТLЕ> </HEAD>
<HEAD> <ТIТLE>Компьютер</ТIТLЕ> </HEAD> |
Содержимое веб-страницы
— это контейнер, куда помещается всё основное содержимое страницы сайта. Данный контейнер может содержать таблицы, бегущие строки, ссылки на звуковые, видео и графические файлы, текст и так далее.
Чтобы понимать принцип создания сайта с нуля в блокноте, поместит в основной контейнер текст:
<BODY> Компьютер - это электронное вычислительное устройство. </BODY>
<BODY> Компьютер - это электронное вычислительное устройство. </BODY> |
Основа WEB-страницы
Итак, со структурой мы разобрались. Открываем блокнот и вносим туда следующий текст:
<HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Компьютер - это электронное вычислительное устройство. </BODY> </HTML>
<HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Компьютер - это электронное вычислительное устройство. </BODY> </HTML> |
Чтобы было удобнее — для размещения сайта создать также отдельную папку, куда можно будет складывать все файлы сайта. Сохраняем в эту папку созданную в блокноте страницу с именем файла index.htm или index.html. Таким названием принято называть титульный файл сайта.
Чтобы увидеть созданную и сохранённую страницу сайта — открываем файл index.htm или index.html с помощью браузера. Создание других страниц и дальнейшую проработку сайта рассмотрим в следующих статьях.
Практикум «Создание Web-сайта Компьютер» - PDF Free Download
УРОК 4. Гиперссылки на Web-страницах
УРОК 4. Гиперссылки на Web-страницах Web-Сайт состоит из нескольких web-страниц. Создадим заготовки остальных Web-страниц. Такие «пустые» страницы должны иметь заголовок, но могут пока не иметь содержания.
<HTML> <HEAD> <TITLE>
Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ
3. Основы языка разметки HTML 3.1. Создание HTML-документа в редакторе Блокнот Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером.
Создание сайтов HTML
Создание сайтов HTML HTML Разработку web-сайта можно осуществлять двумя способами: с помощью специального web-редактора; непосредственно написанием программы на языке HTML. HTML (HyperText Markup Language)
Информатика и ИКТ Лекция 12
Информатика и ИКТ Лекция 12 ГБОУ СПО "УМТК" Кондаратцева Т.П. 1 курс Методы создания и сопровождения сайта Основы языка гипертекстовой разметки HTML Интернет - это сложная электронная информационная структура,
WEB-программирование
WEB-программирование Л Е К Ц И И [Shift]+[F5] Ситников С.Ю. Лекция 1 2 Лекция 1 3 Тимоти Джон Бернерс-Ли британский учёный, изобретатель URL, HTTP, HTML, создатель Всемирной паутины Лекция 2 4 Пример элемента
<html> <head> <title>название документа</title>
Создание сайтов HTML
Создание сайтов HTML Начало В 1989 году Тим Бернерс-Ли разработал технологию гипертекстовых документов World Wide Web. Гипертекст это текст, в котором содержатся ссылки на другие документы. Основные понятия
Создание Web-страницы
Создание Web-страницы MS Word можно использовать для создания вебстраниц. Несомненно, разрабатывать веб-страницы гораздо лучше при помощи специальных редакторов (например, Microsoft FrontPage), однако
Синтаксис языка HTML
Введение в HTML Содержание История языка HTML Синтаксис языка HTML Структура документа HTML Цветовая разметка документа. Способы задания цветовых параметров Разметка текста. Физическое форматирование текста.
Приложение 1. Приложение 2
Приложение 1 Приложение 2 Создание Web сайта в программе FrontPage Прикладная программа FrontPage 2003 это визуальный html-редактор для быстрого создания сайта. Язык HTML является основным языком программирования
ОСНОВЫ ПРОГРАММИРОВАНИЯ
ОСНОВЫ ПРОГРАММИРОВАНИЯ Зачем нам знания HTML? Для чего нужен HTML? Как самому создать HTML документ? Для создания HTML файла (документа) необходимо в первую очередь поменять расширение файла текстового
Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ
5.2.Работа в редакторе FrontPage Рассмотрим основные приемы работы в редакторе FrontPage на примере разработки веб-страницы Озера Беларуси. Она будет содержать текст и фотографии, которые следует подготовить
Arilot CMS руководство пользователя
Arilot CMS руководство пользователя 1 Вход в систему администрирования Внешний вид формы авторизации зависит от дизайна 1.1 При наличии кнопки «Вход» Нажмите кнопку «Вход» (Рисунок 1: Кнопка входа). Рисунок
Создание сайтов средствами сервиса Google
Создание сайтов средствами сервиса Google Краткие теоретические сведения Сервис Google Сайты позволяет быстро создать собственный сайт даже тем, кто не знаком с профессиональными инструментами веб-дизайна.
Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ
3.2. Изображения на веб-страницах Важную роль в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения («обои»), разделительные линии. Они не только делают страницы
6. Графика. Учебник HTML. Изображения
- неправильный код. Лекция 4 1
Будьте внимательны и не допускайте таких ошибок: - помещать внутрь тега ... еще теги или нельзя, так как этот код будет не правильно распознан - неправильный код Лекция 4 1 Не будет ошибкой,
Разработка Web-страниц
Разработка Web-страниц Цель работы: получить представление о создании гипертекстовых документов с помощью языка HTML. Создать персональную Web-страницу. Результат работы файл Моя страница1_фамилия.doc
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ 13
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ 13 ТЕМА: Редактирование Web документов Цель занятия: 1) научиться создавать структуру и панель навигации сайта; 2) научиться изменять внешний вид кнопок, цветовую схему, фон Web-страниц;
Лекция Каскадные таблицы стилей (CSS)
Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Каскадные таблицы стилей
Лекция 3 Текстовый процессор
Лекция 3 Текстовый процессор Текстовый редактор Microsoft Word Приложение Microsoft Word 2010 это текстовый процессор, предназначенный для создания профессионально оформленных документов. Объединяя в себе
Создание вэб-приложений. 26 часов
Создание вэб-приложений 26 часов HTML HTML теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными
HTML. Создание таблиц.
Тема: Цель: Время: Задание: Практическая работа 43. HTML. Создание таблиц. Познакомиться с языком HTML, получить навыки работы с обязательными тегами, научиться создавать и форматировать документ. 80 мин.
Рис. 1. Диалоговое окно Маркеры и нумерация.
Лабораторная работа 5 Оформление текста в виде списков и колонок Создание списков В текстовых документах перечисления различного типа оформляются в виде списков. Существуют списки различных типов: нумерованные
1.1. Общие понятия HTML
16 Для создания веб-страниц часто используется язык гипертекстовой разметки HTML. Конечно, каждый сайт индивидуален, но существуют общие правила построения HTML-страниц. Им обязательно нужно следовать
HTML: работа с текстом Урок 2
HTML: работа с текстом Урок 2 Основной текст располагается body между метками >.... Разд В отличие от текстовых документов прерывания строк в HTML-файлах не существенны. При про Разбиение документа
ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR
ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR Описание редактора CKeditor Форматирование текста 1. Сервисы редактора CKeditor 2. Стили шрифта 3. Структурирование текста 4. Выравнивание текста 5. Вставка ссылок,
Руководство пользователя
Руководство пользователя по работе с редакционной системой EDUkIT (www.edu.kh.ua) «Создание и редактирование страниц» Контактное лицо: Дарья Рыжкова [email protected] телефон: (057) 751 86 15 Содержание
АТИЛЕКТ.CMS. [Текстовый редактор]
![АТИЛЕКТ.CMS. [Текстовый редактор]](/800/600/https/docplayer.ru/thumbs/50/26284184.jpg "АТИЛЕКТ.CMS. [Текстовый редактор]")
ИНСТРУКЦИЯ к системе администрирования АТИЛЕКТ.CMS [Текстовый редактор] Оглавление Модуль «Текстовый редактор»... 2 Редактирование данных... 2 Как разместить в тексте ссылку... 4 Ссылка... 4 Якорь... 4
Практическая работа 1
Порядок выполнения работы Практическая работа 1 1. Выполните упражнения 1, 2, 3, 4, 5, 6. Упражнение 1 1. Создайте новый документ. Сохраните документ с именем Текст1.doc. 2. Установите параметры страницы
Лекция 6. Элементы HTML 4.01 (продолжение)
Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Лекция 6. Элементы HTML 4.01 (продолжение) Иваница Сергей Васильевич, ассистент кафедры
Вопрос 3. HTML формы
Вопрос 3. Язык гипертекстовой разметки HTML. HTML (HyperText Markup Language) это коллекция стилей (указанных в терминах языка HTML), которые определяют различные компоненты WWW документов. Годом рождения
Компьютер
<html>
<head>
<title> Компьютер </title>
</head>
<body>
<font color="blue">
<h2 align="center"> Все о компьютере </h2>
</font>
<hr>
<font size="4pt">
<p align="left"> На этом сайте вы сможете получить « различную информацию
</i> о компьютере, его программном обеспечении и ценах на компьютерные
комплектующие.</p>
<p align="right"> Терминологический словарь познакомит вас с
<b> компьютерными терминами </b>, а также вы сможете заполнить анкету. </p>
</font>
<img src=computer.png title="KourizioTep"
align=right>
</body>
</html>
<html> <head> <title> Компьютер </title> </head> <body> <font color="blue"> <h2 align="center"> Все о компьютере </h2> </font> <hr> <font size="4pt"> <p align="left"> На этом сайте вы сможете получить « различную информацию </i> о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</p> <p align="right"> Терминологический словарь познакомит вас с <b> компьютерными терминами </b>, а также вы сможете заполнить анкету. </p> </font> <img src=computer.png title="KourizioTep" align=right> </body> </html>
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand Not a member of Pastebin yet?Sign Up, it unlocks many cool features!
Знакомства с html тэгами - Вэб-шпаргалка для интернет предпринимателей!
Ну а теперь давайте разберем все по порядку.
| <html> <head> <title>Моя первая страница</title> </head> <body> Получилось!!! <br/> Это моя первая страница. </body> </html> |
Все, что находится между символом «<» и « >» — это тэг. Текст, не находящийся между такими скобками < > — весь виден при просмотре в брaузере.
Тэги, как вы уже догадались, бывают разные и для разных случаев. На пример тег <br/> говорит браузеру, что надо перейти на новую строку.
В этом коде мы видим три обязательных тэга, это такие теги, которые вы всегда должны прописывать для каждой своей страницы, иначе браузер просто не поймет, как правильно отобразить страницу.
<html> — Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий: </html>.
Он говорит браузеру, что все, что он увидит в рамках этого тэга написано на языке html.
Дальше обозначаем голову документа тэгами:
<head>
Вся информация, которая находиться между ними является «служебной» тоесть она предназначено для поисковиков, браузеров и скриптов обработчиков. Обратите внимание, где находится предложение, заключенное в тэгах: <title> </title>. Подсказка: посмотрите на вкладку вашего браузера.
</head>
Все что расположено между тэгами <body> </body> — и есть содержимое документа, то что вы видите перед экраном монитора. Вы должны понять сам механизм работы этих тэгов, дело в том, что <тэг> </тэг> — это не просто тэг, это контейнер, который может содержать внутри себя другие тэги, текст, изображения и т.п.
Обратите внимание:
<тэг1> <тэг2> <тэг3> … </тэг3> </тэг2> </тэг1>
Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым — закрываем последним, второй – предпоследним и т.д. Другая очередность открывающих и закрывающих тэгов приведет к неправильному отображению вашего сайта в браузере.