|
|
|
|
|
|
|
|
|
|
Урок 1.1: Создание простой web-страницы. Создание страницыКак сделать веб страницу html с картинкой для чайников
для чайников
Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.
HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).
То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги). При помощи тэгов ваша страница (файл) общается с браузером, то есть она ему говорит, что здесь находиться текст определенного шрифта, размера, цвета и т.д. а браузер в свою очередь размещает этот текст, в своем окне, исключительно таким образом каким вы указали при создании страницы. Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”. Для этого нам понадобится любой текстовый редактор. Я вам посоветую «Notepad++». Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами. Это будет выглядеть так: «page.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 с картинкой
Если вы выполнили все так, то в браузере будет отражен результат вашей работы. Оказывается, сделать html страницу совсем не сложно! Ниже приведены атрибуты для тега <img>, и их предназначение:
Добавить комментарийwww.sitedelkino.ru Как создать html страницу
Каждый начинающий вебмастер должен знать, как создать html страницу, а делается это очень легко и просто. Я могу вам уверенно сказать что после того как прочитаете эту статью, Вы будете создавать html страницы без никаких трудностей. Вы можете написать html код в любом текстовом редакторе ( даже в блокноте ) но, я вам рекомендую для начало воспользоваться таким замечательным редактором как notepad++. Он очень удобный и простой в использований. Вы можете скачать его на официальном сайте https://notepad-plus-plus.org. Основной плюс у этого редактора в том, что есть подсветка кода. Поверьте это очень удобно, т.к. сразу заметно, где открывается тег и где он закрывается. Открываем программу и как вы заметили новый файл с именем new 1, создался автоматически. 
Этапы создания html страницыТеперь из нового файла создаем html документ следующим образом: 1. Идем в меню файл и выбираем пункт сохранить как… или нажимаем горячие клавиши ( Ctrl+Alt+S) 2. В появившемся окне выбираем место, где хотим сохранить файл. 3. В поле имя файла пишем index и выбираем тип файла Hyper Text Markup Language file (*html; *htm; *shtml; *shtm; *xhtml;*hta). 
После того как выбран тип файла, в конце имени файла автоматически вставляется расширение html.  4. Нажимаем сохранить. Имя файла изменилось на index.html 
Закрываем Notepad++ и едем в указанной папке, где сохранили файл. Там создался файл index, с расширением html и со значком браузера который установлен у вас по умолчанию. При двойном щелчке, файл открывается в вашем браузере. У меня браузер по умолчанию выбран опера, поэтому сохраненный файл выглядит так: 
После того как открыли файл в браузере мы ничего не видим так как наш файл пустой, в нем нету ни одной строчки кода html. Давайте исправим ситуацию, напишем в файле пару строчек кода. Для этого идем в папку с нашим файлом, кликаем на него правым кликом мыши и в появившемся меню выбираем пункт Edit with Notepad++. 
Файл откроется в редакторе Notepad++. Теперь напишем в файле следующий код: <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>Файл html</title> </head> <body> <h2 align="center" > Привет Мир </h2> </body> </html>После этого нужно сохранить файл, для этого идем в меню файл и выбираем пункт сохранить или нажимаем горячие клавиши ( Ctrl + S ) Также есть еще один способ для сохранения файла, нужно нажать на значок дискеты который находится на панеле инструментов.  Обратите внимание на цвет дискеты возле имени файла. Если в файле сделаны какие то изменения, то цвет дискеты становится красным, это означает что файл не сохранен. 
После того как сохранили файл, цвет дискеты становится синим. 
И так файл мы сохранили, давайте откроем заново его в браузере и посмотрим что получилось. 
В браузере выводился заголовок Привет Мир, это означает, что мы все сделали правильно. На этом пожалую все, думаю, вы поняли на 100 % как создать html страницу и теперь у вас не возникнут трудностей сделать это. Похожие статьи:Видео:Понравилась статья?Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи. Поделиться с друзьями: Подписаться на новые статьи: Поддержите пожалуйста мой проект!<< Предыдущая статьяСледующая статья >>Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту [email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю. Добавляйтесь ко мне в друзья в: Добавляйтесь в мои группы: Подпишитесь на мои каналы: Автор статьи: Мунтян Сергей Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!! Дата добавления: 2014-02-19 01:58:52 sozdatisite.ru Создание простой web-страницы на HTMLЧто такое HTML? Из описания: HTML - язык разметки гипертакста (или язык гипертекстовой разметки). Так давайте познакомимся с ним поближе. Для начала создайте у себя на компьютере файл с любым названием и расширением .html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").
При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию 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 Основы HTML. Как создать HTML страницуЗдравствуйте уважаемые читатели блога dmitriydenisov.com. В этой статье мы будем знакомиться с языком гипертекстовой разметки HTML. Из данного материала вы узнаете базовые понятия HTML, из чего состоит HTML документ и как создавать HTML страницу. Поскольку язык гипертекстовой разметки является основой любого сайта, то его нужно знать в обязательном порядке всем тем, кто занимается созданием сайтов. Знание основ HTML избавит вас от множества вопросов и проблем, а также поможет сэкономить время при разработке сайтов. Базовые понятия HTML. Что такое теги HTML. Как создавать каркас документа HTMLИтак, первым делом давайте ознакомимся с тем, как создать новый HTML документ. Для этого нужно знать из чего состоит каркас HTML документа, но прежде чем приступить к рассмотрению каркаса, давайте ознакомимся со значением такого слова, как тег. Тег – это так называемый контейнер, который сообщает браузеру, как нужно отображать тот или иной элемент. Например, нам нужно чтобы текст был выделен абзацами. Для этого нужную часть текста помещаем в теги абзацев <p>. На практике это будет выглядеть таким образом: <p>Текст HTML документа, который должен быть выделен абзацем</p>Как видите HTML тег <p> парный, т.е. абзац начинается открывающим тегом <p> и заканчивается закрывающим тегом </p>. Это сообщает браузеру, что данный «контейнер» завершен. Также существуют непарные теги, которые закрывать не нужно, но об этом мы поговорим чуть позже. Теперь давайте перейдем к самому процессу создания нового HTML документа. Для этого можно воспользоваться любой удобной для вас программой. Я бы рекомендовал как для работы, так и для обучения использовать программу Dreamweaver или Notpade++. Первая программа специально предназначена для работы с HTML, PHP, CSS и т.д., но ее я бы не советовал использовать, если вы только начинаете изучать язык гипертекстовой разметки HTML. Она прекрасно подойдет для разработки сайтов, если вы уже обладаете нужными знаниями в данной области. Вторая программа под названием Notpade++ является простым текстовым редактором, который тоже отлично подойдет для наших целей, а именно для изучения HTML. Лично я при подготовке статьи пользовался именно программой Notpade++, так как она очень проста в использовании и не будет отвлекать внимание разнообразными доступными функциями. Плюс ко всему этому она очень легкая и не сильно нагружает компьютер (моему ноутбуку порядка 3-х лет и он с трудом дышит, когда на нем запущено несколько программ, таких как, например, Adobe PhotoShop CS5 + Dreamweaver + FireFox и т.д). Итак, первым делом создаем новый документ, например, index.html. Для этого можно создать простой текстовый документ и изменить его расширение с txt на html. Для того чтобы изменить расширение через проводник (если вы используете операционную систему Windows), нужно первым делом зайти в Панель управления – Свойства папок – Вид и снять галочку с пункта «Скрывать расширение для зарегистрированных типов файлов». После этого в проводнике вы сможете просматривать и изменять расширения для файлов. После создания HTML файла отрываем его на редактирование в программе Notpade++ и добавляем в него следующий код. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Название страницы</title> <meta http-equiv="Content-type" content="text/html" charset="windows-1251"> <meta name="keywords" content="ключевые слова через запятую"> <meta name="description" content="краткое описание"> </head> <body> <p>Содержимое страницы</p> </body> </html>Данный код является каркасом HTML страницы, поэтому его можно один раз создать и в дальнейшем просто копировать, изменяя лишь нужные вам значения. Теперь давайте подробно рассмотрим каждую строчку, которая присутствует в приведенном выше коде. Сразу хочу обратить ваше внимание на то, что данную структуру нужно сразу запомнить, так как она лежит в основе каждой HTML страницы.
Кроме приведенных выше конструкций вы также можете поместить между тегами <head> следующие:
На этом мы заканчиваем знакомиться с языком гипертекстовой разметки HTML. Как видите данный язык очень простой в изучении и для того, чтобы создать HTML страницу не нужно прикладывать особых усилий. В следующих статьях рубрики «HTML, CSS, PHP и MySQL» мы продолжим изучение HTML, поэтому, если вы не хотите пропустить обновлений блога, вы можете подписаться на новости сайта любым удобным для вас способом в пункте «Подписка». На этом все. Удачи вам и до скорых встреч на страницах блога dmitriydenisov.com Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter dmitriydenisov.com
genealogic.narod.ru
|
