Моя первая страница – HTML-уроки. Моя первая страница | Заметки программиста

HTML-уроки. Моя первая страница | Заметки программиста

Осваивать язык html лучше всего самостоятельно создавая интернет странички. Для начала определим где будут хранится файлы нашего сайта. Например, я на диске D: создам папку «HTML-уроки», в ней подпапку «Урок 1». В дальнейшем у нас будут добавляться еще подпапки для картинок, css и т.п.
Теперь открываем редактор (например Блокнот Windows или Nodepad++) и набираем в нем html-код:

<html> <head> <title> Урок 1 <title> </head> <body> <h2>Моя первая html-страничка</h2> <p>А это текст моей первой html-странички.</p> </body> <html>

 

<html>

  <head>

    <title> Урок 1 <title>

  </head>

  <body>

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

    <p>А это текст моей первой html-странички.</p>

  </body>

<html>

 

Теперь файл надо сохранить в нашу папку — жмем «Сохранить как…» -> «D:\HTML-уроки\Урок 1» и указываем имя index.html или index.htm Какая разница html с htm? Разница между html и htm в единственной лишней букве расширения имени файла. Больше распространено именно html, но ничто не мешает сокращать по своему усмотрению. Такое расширение происходит от полного названия языка гипертекстовой разметки – Hyper Text Markup Language. Последнее слово опускается, и получается htm.

После того как файл сохранен мы можем посмотреть нашу первую страничку открыв его в браузере.
Давайте теперь разберемся что мы написали в нашем файле index.htm:

  1. Тег <hеаd> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую на веб-странице, за исключением тега.
  2. Тег <titlе> определяет заголовок документа.
  3. Тег <bоdy> предназначен для хранения содержания веб-страницы (контента).
  4. Теги <Н1>, <Н2>, <Н3>, <Н4>, <Н5>, и <Н6> это заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Тег <Н1> наиболее важный заголовок первого уровня, а <Н6> является наименее значительным.
  5. Тег <р> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой.

Похожие записи

codernote.ru

Учебник HTML 5. Статья "Создание первой страницы"

В этом учебнике для создания HTML файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Рассмотрим, как вы будете создавать свой первый HTML файл с использованием программы Notepad++.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск - Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Напишите несколько HTML тегов

Запишите в редактор следующий HTML код:

<!DOCTYPE html> <!-- декларация сообщает, что в этом документе используется пятая версия HTML -->
<html> <!-- корневой элемент HTML документа (все остальные элементы должны быть его потомками) -->
	<head>
		<title>Моя первая страница</title> <!-- обеспечивает название для документа -->
	</head>
	<body>  <!-- описывает видимое содержимое страницы  -->
		<h3> Это заголовок </h3> <!-- описывает заголовок второго уровня -->
		<p>Это параграф.</p> <!-- определяет параграф (абзац) -->
	</body>
</html> <!--закрывающий элемент (после него не должно быть каких-либо элементов) -->

Давайте разберем по частям, что мы сделали в этом примере:

  1. Объявили декларацию <!DOCTYPE html>, которая определяет тип документа и сообщает браузеру, что необходимо интерпретировать код на языке HTML 5.
  2. Добавили элементы <html> и </html>, которые определяют границы нашего HTML кода. Обращаю Ваше внимание, что после закрывающего тега </html> не должно быть никаких элементов.
  3. В заголовочной части (от слова голова) нашего документа (между тегами <head> и </head>) мы разместили элементы <title> и </title>, которые определяют наименование нашей страницы - "Моя первая страница". Наименование страницы, которое вы указали отображается на вкладке любого браузера.
  4. В теле нашей страницы, элементы <body> и </body> мы разместили заголовок второго уровня (<h3>) и абзац (<p>). Еще раз обращаю Ваше внимание, что видимое содержимое страницы помещается между тегами <body> и </body>.

В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!-- ... -->, текст внутри такого элемента не отображается браузером. Подробно использование комментариев мы рассмотрим далее в учебнике в статье "Комментарии и якоря".


Код HTML нашего примера в редакторе Notepad++:

Рис. 3 Пример создания HTML документа.

Шаг 3: Сохраните HTML страницу

Чтобы сохранить файл на вашем компьютере как HTML документ выберите в редакторе Файл > Сохранить как (либо сочетание Ctrl-Alt-S).

Вы можете не искать в списке тип файла, а сразу указать название файла с разрешением html. Назовите файл "index.html" и файл автоматически сохранится как HTML документ в кодировке UTF-8.

Допускается выбрать любое понравившееся вам имя документа, на данном этапе обучения это не имеет значения. Справочно: заглавные страницы сайтов, как правило, называют index.*. Это связано с тем, что отсутствует необходимость изменять конфигурацию файла веб-сервера, установленную по умолчанию.

После того как Вы сохранили ваш текстовый документ как HTML файл, редактор начинает выделять весь HTML код цветом (визуализация кода) - это одно из основных достоиноств текстовых редакторов

Окно сохранения в редакторе Notepad++:

Рис. 4 Сохранение текстового файла как HTML документ.

Шаг 4: Просмотр HTML страницы в браузере

Откройте Ваш сохраненный файл в браузере, результат должен выглядеть следующим образом:

Рис. 5 Пример отображения HTML документа в браузере.

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


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


Изменение настройки кодировки в браузере Chrome:

Рис. 6 Пример настройки кодировки в браузере Chrome.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив с текстовым файлом:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 1.

Подсказка: используйте для первого заголовка на странице, тег заголовка первого уровня.

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

Фрагмент страницы примера в инструментах разрабочика браузера Chrome.

basicweb.ru

Основы HTML для начинающих – «Моя первая страничка на HTML» . Урок №2

Главная » Основы HTML » Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2

Всем привет!
В сегодняшнем уроке мы попробуем вместе создать первую страничку на HTML. Благодаря практическому уроку, вы сможете понять всю теорию, которую я упоминал в уроке №1, а также попробую все проделанное изложить по полочкам.
Итак, для работы нам понадобиться стандартный текстовый редактор «Блокнот». Кто не знает, где искать «Блокнот», пишу:

на вашем компьютере снизу в левом углу есть кнопка «Пуск», нажмите на нее.
Далее выберите «Все программы» => «Стандартные» => «Блокнот».

А теперь попробуем создать первую веб-страницу. Следуйте данным пунктам:

1). Откройте блокнот

2). Создайте папку
На вашем компьютере создайте папку под названием «Мои опыты с HTML». В эту папку вы будете сохранять все файлы, сделанные по курсу изучения основ HTML.

Теперь вспомним скелет HTML из урока №1.

Скелет HTML

3). Пропишите код

Опираясь на стандартную схему-скелет HTML, прописываем в «Блокнот» вот такой код (вы можете скопировать код и вставить в блокнот):


<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

[Посмотреть результат]

4). Сохраните документ

Сохраните документ как «index.html».
Для этого в меню блокнота нажмите «Файл» => «Сохранить Как»:

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мои опыты с HTML».
В поле «Имя файла» напишите index.html (а не просто index, это важно). Таким способом мы создаем файл с расширением *.html для веб-страниц. Далее нажмите на кнопку «Сохранить»:

В папке «Мои опыты с HTML» появиться файл под названием «index», нажмите на него двойным щелчком мыши или откройте этот файл через любой браузер, например, Internet Explorer. Вот такой результат вы должны увидеть на мониторе компьютера:

Теперь разберем код по косточкам .

<html> - открываем HTML документ.
<head> - открываем голову HTML документа.
<title>  - открываем заголовок.
Моя первая HTML-страничка на StepkinBlog.ru
</title> - закрываем заголовок.
</head> - закрываем голову HTML документа.
<body> - открываем тело HTML документа.
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body> - закрываем тело HTML документа.
</html> - закрываем HTML документ.

Я думаю, вы заметили, что текст, который находится между тегами <title>здесь текст</title>, отобразился во вкладке браузера, а все, что находится между тегами <body>здесь текст</body>, отобразилось на экране монитора:

P.S. Хочу еще раз напомнить о парных тегах, которые нуждаются в закрытии, например:

<body> - открываем HTML документ
</body> - закрываем HTML документ (закрывается тег знаком «/»)

и теги-одиночки, которые не нуждаются в закрывающей паре:

<br> -перенос строки.

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

Также хочу направить ваше внимание на правильность написания парных тегов:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

Обратите внимание, тег, который открывается первым должен закрыться последним, второй - предпоследним и т.д.
Это правильное закрытие парных тегов, а теперь давайте посмотрим, как нельзя закрывать парные теги:

<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>

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

Предыдущая запись
Cкелет HTML. Основы HTML для начинающих. Урок №1 Следующая запись
Знакомство с CSS. Основы CSS для начинающих. Урок №1

stepkinblog.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

Ступенька 1-ая. Первые шаги в HTML

Ступенька 1-ая.


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

D:\первые шаги\

У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст: 


<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! 🙂
</body>
</html> (посмотреть)
Сохраним этот документ, присвоив ему имя *.html 

D:\первые шаги\index.html

Многие читатели спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html", они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание. 

Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом: 

- Файл -> Сохранить Как (File -> Save as)
- Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
- Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save). 

Вот и все. Надеюсь, теперь у всех все будет в порядке. 

Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ. 

Файл - Открыть - кнопка Обзор - Наш документ (index.html) 
File – Open – Browse – index.html

Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ. 

Посмотрим теперь, что у нас получилось, и разберемся, как оно так получилось 🙂 

Далее: Ступенька 2-ая >>> 

html-template.ru

Создание первой интернет странички - Вэб-шпаргалка для интернет предпринимателей!

Итак, сегодня мы создадим свою первую интернет страницу и сделаем первый шаг к покорению интернета 🙂

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

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

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

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

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

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Получилось!!!<br/>Это моя первая страница.
</body>
</html>

В верхнем левом углу редактора открываем вкладку «файл» выбираем «сохранить как» В появившемся окне выбираем директиву путь (место, где будет храниться наш файл) а ниже в строке «имя файла» даем имя нашему файлу, ставим точку и пишем его расширение, в нашем случае «html», к примеру, если назовем наш файл «index» то сохранять его надо в таком виде: «index.html»

Затем открываем наш файл, если на экране появилось:

Получилось!!!
Это моя первая страница.

Значит, вы все сделали правильно, и я могу вас поздравить с созданием первой интернет странички! Но если возникли какие-то трудности или вопросы, то не стесняйтесь и задавайте их на нашем форуме.
Не забывайте сохранять внесенные изменения в редакторе и обновлять страницу в браузере.

Рекомендуем к прочтению

web-shpargalka.ru

Создаем первую HTML страницу

Главная | Технология | Школа html-верстки для начинающих | Создаем первую HTML страницу




Школа html-верстки для начинающих



Урок 2
Создаем первую HTML страницу


Содержание урока

Создаем первую html страницу

Создаем первую html страницу.mp4

Практикум


Создаем первую html страницу

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

Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.

Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке здесь - ). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:


<html> 
<head> 
<title>Мой первый сайт </title> 
</head> 
<body> 
Здравствуйте! Это моя первая веб-страница! 
</body> 
</html>

Далее, нажимаем в верхнем меню кнопку "Кодировки" и выбираем "Кодировать в UTF-8"

Большинство сайтов рунета состоят из страниц html написанных на кодировке UTF-8. Для того чтобы наши страницы корректно отображались в браузере, мы тоже будем использовать данную кодировку.

Теперь нужно сохранить наш файл в формате html.

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

Для этого нажимаем в верхнем меню кнопку "Файл", затем "Сохранить как", выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).

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

Как это все работает, мы разберем в следующих уроках.

* Когда нам нужно будет открывать файл для редактирования, будем нажимать правой кнопкой мыши на файл и выбирать "Edit with Notepad++" (открыть с помощью Notepad++).

Источник информации: http://htmlboss.ru/beginner

Следующая страница Создаем первую html страницу.mp4

xn----7sbbfb7a7aej.xn--p1ai

Отправить ответ

avatar
  Подписаться  
Уведомление о