Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.
В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.
Как создать страничкуПервую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.
Откройте документ.
Вставьте в него вот этот код.
|
Моя первая страница
Мы дошли до самого низа Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. К примеру, вот ссылка на мой блог - Start-Luck - рассказывает просто о "сложном". |
Моя первая страница
Создать страницу проще, чем вы думаете
Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.
Простой код позволяет сделать текст красным
Написать жирным не намного сложнее
Мы дошли до самого низа
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино..
Ну вот и все. Ваша первая страница готова
Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.
Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.
Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.
Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению.
Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5
Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: .
Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.
Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на , который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.
Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.
ТегиС вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу.
Она не единственная и я могу предложить вам еще несколько если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части.
ОсновныеНачинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.
Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.
Именно теги отвечают за начало и конец основной информации о страничке.
Тег указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style , как мы это делали в примере. Хотя об этом тоже рановато.
Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4.
В этой же строчке есть открывающийся и закрывающийся . Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.
— один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.
Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.
Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.
Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.
В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.
отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.
помогает выделить текст жирным.
рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.
Ссылкиуказывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес” . В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег .
После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html .
Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.
Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup
Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.
Сегодня вы сделали много, ведь первый шаг самый сложный.
Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.
До новых встреч и удачи!
Либо , а лучше все четыре, потому что многие элементы HTML по-разному показываются в различных программах просмотра, и очень лучше держать под контролем эту разницу.
Не считая браузера нам нужен будет хоть какой текстовой редактор, к примеру, Блокнот (Notepad) из Windows либо Notepad, но идеальнее всего Dreamweaver. Программа нужна для подготовки HTML файлов, а браузер - для просмотра и контроля изготовленного. При помощи этих инструментов мы сделаем WEB сайт на собственном локальном компьютере, после этого поместим его на один из WWW серверов в Интернет, сделав, таким макаром, ваши WEB странички доступными всему миру.
Подготовка к созданию WEB сайтаВ качестве примера подготовим WEB странички некоторой компании. Назовем ее «Компания SD», допустим, что она работает в области автоматических систем управления. Цель WEB сайта - поведать миру о компании, сфере ее деятельности, отыскать партнеров и заказчиков.
Для файлов нашего WEB сайта нужна отдельная папка.
Сделайте папку с именованием WEB на любом жестком диске вашего компьютера. Сейчас запустим программку Блокнот (Notepad) и приступим к работе.
Откройте программку, к примеру Блокнот (Notepad), нажав кнопку Запуск (Start) на Панели задач (Taskbar) и выбрав из показавшегося меню команду Программки - Обычные - Блокнот (Programs - Accessories - Notepad).
Вы сможете использовать хоть какой другой текстовый редактор. Но в данном случае следует сохранять файл как обычный текст, чтоб избежать включения в WEB документ сторонних знаков форматирования.
Поначалу введем главные теги, определяющие структуру хоть какого HTML документа. Напомним, что в HTML коде допускается использовать хоть какой регистр знаков - верхний либо нижний.
1-ые тегиВведите с клавиатуры последующие главные теги, поместив любой из их, не считая закрывающего тега , в новейшей строке.
Для ввода парных тегов вы сможете использовать операции копирования и вставки через буфер обмена Windows с следующим добавлением знака слэш /.
Напомним, что 1-ый и последний теги означают соответственно начало и конец документа, элемент … определяет заголовок WEB странички, элемент … - тело документа, а в элементе мы на данный момент укажем заглавие WEB странички.
Меж открывающим и закрывающим тегами воткните заглавие документа - Компания SD. Этот элемент должен смотреться последующим образом:
Компания SD
Напомним, что заглавие WEB странички должно быть маленьким и в наибольшей степени показывать ее содержание.
Наша последующая задачка - воткнуть в тело документа меж тегами … маленький текст-приветствие гостям WEB странички.
Воткните пустую строчку меж тегами и и введите в ней последующий текст:
Добро пожаловать на страницу компании SD! Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим.
Для каждой WEB странички вы сможете найти цвет фона и цвет текста. Это производится при помощи атрибутов bgcolor и text открывающего тега . Для определения цвета как значения атрибутов существует два варианта:
- словесное указание имени цвета, к примеру, white (белоснежный). В языке HTML предвидено шестнадцать таких имен;
- цифровое обозначение в шестнадцатеричной записи, к примеру, "#ffffff" - белоснежный, которое показывает, каким образом цвет формируется из главных цветов - красноватого, зеленоватого и голубого.
Естественно, словесное указание цвета более комфортно и понятно. С другой стороны, числовые обозначения дают больше способностей, потому что позволяют указать фактически хоть какой из 16 777 215 цветов, тогда как словесные обозначения ограничены только шестнадцатью цветами.
Перечислим некие цветовые имена: black (темный), gray (сероватый), red (красноватый), green (зеленоватый), aqua (голубой).
Используем в качестве примера для фона нашей WEB странички голубой цвет (blue), а для текста - желтоватый (yellow).
Воткните в открывающий тег атрибуты bgcolor="blue" и text="yellow". Этот тег должен принять вид:
Не считая указания цвета, для фона WEB странички можно использовать также заблаговременно приготовленный набросок. Но об этом мы побеседуем в предстоящем.
В окне программки Блокнот (Notepad) изберите команду меню Файл - Сохранить (File - Save). На дисплее появится диалог Сохранение (Save As).
Откройте сделанную ранее папку WEB, в какой обязаны сохраняться все файлы WEB сайта.
В поле ввода Название файла (File name) введите other.html - так мы назовем этот файл.
Направьте внимание: вы непременно обязаны указать расширение названии файла HTML, чтоб браузер сумел его открыть. Можно также писать и htm, но это уже устаревший формат и использовать его категорически не рекомендуется.
Смотрим итог работыСейчас можно просмотреть результаты нашей работы.
Не закрывая, сверните окно программки Блокнот (Notepad).
Откройте при помощи программки Проводник (Windows Explorer) папку WEB, в какой вы сохранили файл other.html, и два раза щелкните мышью на его значке. Будет запущен браузер, установленный по умолчанию, и в его окне раскроется документ other.html.
Видите ли, в заголовке окна браузера указывается заглавие документа, которое мы ввели в элементе , а цвет фона и текста странички - такие, как указаны в теге . Текст отображается в одном абзаце и выровнен налево.
Может быть, в вашем браузере размер шрифта текста будет крупнее либо мельче, чем на рисунке. В таком случае изберите команду меню Вид - Размер шрифта - Средний (View - Text Size - Medium) в браузере Internet Explorer, чтоб установить средний размер шрифта.
Следует подразумевать, что различные браузеры могут по-разному показывать содержимое 1-го и такого же HTML файла. Потому при разработке WEB страничек лучше всегда просматривать итог во всех более фаворитных браузерах - Internet Explorer, Opera, Мозилла. В таком случае вы будете убеждены, что гость вашего WEB сайта увидит конкретно то, что вы желаете ему показать.
Просмотрите сделанный файл в другом браузере. На этом шаге работы отличия будут неприметны.
Не закрывая, сверните окна браузеров.
Потому что в элементе мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде 1-го абзаца и выровнен налево. Сейчас следует придать тексту более приятный вид.
Создание веб-сайтов не так ое сложно е дело, как кажется. Узнайте, как закодировать простую страницу с помощью HTML - язык а разметки для Web.
Спроектировать и создать простой веб-сайт очень просто. Даже новички могут изучать веб-дизайн, не прилагая слишком много усилий и времени.
HTML - это основной язык разметки веб-страниц. Давайте изучим его основы, и попробуем создать простую страницу.
Введение в HTML
HTML - это язык гипертекстовой разметки.
Гипертекст - это текст, который работает как ссылка.
HTML определяет структуру веб-страницы, и обеспечивает ее надлежащее отображение в браузере. Документ HTML может быть очень простым или сложным, в зависимости от поставленных задач.
Веб-браузеры получают HTML-документы с веб-сервера, и отображают их как веб-страницы. Каждый браузер понимает HTML, и воспроизводит изображения, текст, видео, так, как это написано в коде.
HTML является основным языком разметки для Web. Однако он используется для создания статических веб-страниц, без интерактивности и анимации. HTML5, последняя версия HTML, немного лучше в этом смысле, особенно что касается видео или аудио.
HTML сегодня – это HTML5, новейшая версия, которая добавляет больше функций, чем предыдущие, и теперь может определять способ отображения видео, изображений и текста на экране браузера.
HTML5 - один из мощных инструментов для разработки веб-страниц. С HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. HTML5 также поддерживает хранение данных на стороне клиента. Это можно использовать для поддержки веб-приложений, когда клиент находится в автономном режиме.
Веб и HTML
Сеть состоит из взаимосвязанных веб-страниц и приложений, а также изображений, видео, анимации и интерактивного контента. Языки разметки составляют основу Web. Эти языки используются с тех пор, когда сайты были очень простыми, и будут оставаться частью сети, ее развития и будущего.
HTML остается фундаментальным навыком для всех веб-разработчиков и дизайнеров.
Согласно обзору W3Techs, HTML - это язык, используемый на 74,3% всех сайтов.
Как создать простую HTML-страницу
Разработка HTML проста, и поэтому можно легко научиться кодировать простую HTML-страницу. Но для начала нужно изучить основы языка.
Кодирование HTML с помощью текстового редактора
Документ HTML - это в основном текстовый документ. Существует множество доступных редакторов текста, которые можно использовать для написания HTML. Два самых популярных: Dreamweaver и Sublime Text. Бесплатные редакторы - Notepad ++ для Windows и Text Wrangler для Mac. На самом деле сделать веб-страницу можно и в Microsoft Word, но делать это не стоит, поскольку он добавляет дополнительный и ненужный код в документы HTML.
Для примера мы будем использовать Notepad ++ в качестве редактора. Вы можете выбрать любой редактор по вашему выбору.
Создание и редактирование HTML
Создание нового документа HTML такое же, как и для любого другого типа документа. Выберите «Файл» - «Новый», чтобы открыть новый документ в Notepad ++. Внесите изменения в документ и нажмите «Сохранить».
Сохранение HTML
HTML-документ - это файл с расширением.htm или.html. Некоторые редакторы также могут предоставить опцию «Сохранить как HTML». Называть файл лучше латинскими буквами, с маленькой буквы, а пробелы заменять тире или точками.
Если вы написали код в «Блокноте» и сохранили его как текстовый документ, то перевести его в html-страничку можно с помощью программы Total Commander. Выбираем команду «Переименовать» и меняем расширение файла из.txt на.html.
Формат HTML-страницы
HTML как язык состоит из элементов, тегов и атрибутов, которые определяют содержание сайта. Элементы HTML позволяют нам добавлять таблицы, изображения, видео, аудио и т. д. на веб-страницу.
Элементы HTML
Элементы определяют структуру и содержимое веб-страницы. Обозначаются угловыми скобками вокруг имени элемента. Содержимое, которое не находится между "", будет отображаться на веб-сайте. Элемент выглядит примерно так:
Теги
Элемент с угловыми скобками вокруг него образует тег (). Теги не отображаются на экране, но помогают браузеру понять, что он должен отображать. Открывающий тег отмечает начало элемента, а закрывающий тег отмечает его конец.
Например:
Открывающий тег:
Закрывающий тег:
Содержимое между открывающим и закрывающим тэгами является содержимым элемента.
Теги могут использоваться двумя способами:
Использование тегов в паре
Парные теги содержат открывающий и закрывающий теги. Вот как они выглядят:
Здесь какой-то текстСуществует открывающий тег () и закрывающий тег (), указывающий конец абзаца. Это означает, что все, что находится между этими двумя тегами, является абзацем.
Одиночные теги
Одиночные теги используются для определения самозакрывающихся элементов, и вставки элементов, таких как изображения. Вам не нужно определять начало и конец этих элементов.
Эти элементы пишутся так:
Закрытие / (косая черта) также не является обязательным. Это то же самое, что и при записи . Однако, чтобы избежать путаницы с открывающим тегом, рекомендуется добавить / (косую черту) в конце.
Атрибуты
Атрибуты - это элементы, которые расширяют теги дополнительной информацией. Атрибут помещается в открывающий тег, и включает имя и значение.
Тег с атрибутом будет выглядеть так:
Тег «HTML» выше имеет атрибут «lang» со значением «en-US».
Структура документа HTML
Каждый HTML-документ имеет базовую структуру, определенную с помощью следующих элементов:
DOCTYPE или DTD: Декларация типа документа указывает версию используемого HTML. Этот тег помещается в начале документа.
HTML: Пара тегов HTML определяет начало и конец документа HTML.
Раздел HEADER < head>: этот раздел определяет общую информацию для страницы, и обычно короткий. Содержимое этого элемента не отображается на странице. Заголовок содержит тег TITLE, который определяет название документа, отображаемое в строке заголовка браузера. HEADER также может содержать метаданные, или ссылки на внешние файлы.
Раздел BODY : Этот раздел содержит основную часть страницы. Его содержимое отображается в браузере. Большая часть кода HTML-страницы находится внутри элемента body.
Кодировка: этот тег указывает кодировку, используемую в документе HTML. Кодировка указывает, как файл сохраняется, и как будут отображаться специальные символы. Общепринятым значением для этого тега является UTF-8, который позволяет отображать практически все символы языка.
Простая страница HTML
Теперь, когда мы поняли основные элементы HTML, попробуем создать базовую HTML-страницу. Давайте начнем с создания чистого текстового документа в текстовом редакторе.
Шаг 1: Первая строка добавляемого HTML-кода указывает элемент DOCTYPE как «html». Это означает, что используется последняя версия HTML.
Шаг 3: Затем мы добавляем тег заголовка с тегом Title и сведениями о наборе символов.
Hello World
Шаг 4: После этого пишется тег BODY.
Hello World
Шаг 5: Теперь пустой HTML-документ готов. Давайте начнем добавлять текст для отображения. Мы добавляем тег заголовка и тег
Они определяют заголовок первого уровня и абзац под ним.
Hello World
Hello World
Простая страница HTML
Основная HTML-страница готова, и мы можем сохранить ее в папке по нашему выбору.
Просмотр страницы HTML
Чтобы просмотреть HTML-страницу, нам нужно открыть ее в браузере. Перейдите в папку, где был сохранен документ HTML, и дважды щелкните по нему.
Он откроется в браузере, и мы видим очень простую страницу. Вы можете проверить, что он показывает:
Заголовок как «Hello World»
Заголовок первого уровня как «Hello World»
Абзац с текстом «Простая страница HTML»
Теперь, когда мы создали простую HTML-страницу, давайте посмотрим, как мы можем добавить дополнительные функции. HTML предоставляет гораздо больше функций, чем то, что мы добавили в основную HTML-страницу. Вы можете добавить цвет фона, шрифты, указать цвета шрифтов, изображения, ссылки, списки и т. д., чтобы создать красивую HTML-страницу. Давайте рассмотрим некоторые из этих дополнительных функций.
Расширенное форматирование текста
В HTML предусмотрены специальные элементы для специального форматирования текста.
Уровни заголовков можно задавать с помощью тегов - . Всего доступно 6 уровней для заголовков. Причем - это самый большой из них по размеру, - самый маленький.
Теги
используются для указания начала нового абзаца. Браузер обычно добавляет одну пустую строку между двумя абзацами.
Элементы форматирования используются для отображения специальных типов текста. Текст может быть отформатирован такими тегами:
Жирный –
Курсив –
Подчеркнутый –
Шрифт –
Полный список этих тегов доступен по ссылке .
Добавление ссылок
Это текст ссылки
Добавление изображений
Тег является одиночным тегом, без тега закрытия. Вы можете указать атрибуты изображения.
Атрибут src указывает местоположение изображения.
Атрибут style имеет много параметров, включая ширину и высоту изображения в пикселях.
Атрибут alt дает краткое описание изображения. Используется, если по какой-либо причине изображение не загружается.
Добавление заголовка
Тег является новым для HTML5 и указывает самый верхний элемент веб-страницы. Заголовки обычно содержат логотип компании, контактную информацию, ссылки навигации и т. д. В одном документе может быть несколько элементов .
Расширенные понятия в HTML
HTML - простая технология для изучения, поэтому многие дизайнеры просто работают, имея элементарные понятия. Если вы хотите в полной мере использовать HTML, вам нужно будет ознакомиться с передовыми концепциями. Это поможет вам создать привлекательный веб-сайт с меньшими усилиями.
Мы упомянем несколько концепций, которые помогут вам в дальнейшем. Вы можете продолжить изучать больше и использовать расширенный HTML и его возможности.
Проверка HTML-кода
Проверка HTML используется для проверки ошибок в коде HTML. Если ваша веб-страница не загружается, вы можете использовать проверку, чтобы найти причину проблемы.
Валидация также дает рекомендации по коду, который не соответствует последнему стандарту HTML. Недействительный HTML сделает сайт непригодным для использования. Это может вызвать проблемы с загрузкой или несогласованность вывода с различными браузерами. Многие сервисы проверки бесплатны, например, validator.w3.org
Добавление дополнительных тегов
HTML-тегов и атрибутов намного больше, чем мы здесь обсуждали. Два хороших ресурса для обучения - w3schools и HTML Dog, у которых есть больше учебников и полный список тегов.
Вы также можете использовать «Просмотр исходной страницы» в браузере, чтобы изучить код хорошо продуманных веб-сайтов и увидеть новые методы.
С помощью услуги веб-хостинга вы можете добавить несколько HTML-страниц на свой веб-домен. Вам может потребоваться программное обеспечение FTP-загрузки для передачи ваших HTML-файлов на веб-сервер. Есть много услуг веб-хостинга, которые предоставляют функцию FTP.
Добавление CSS и JavaScript
CSS может использоваться для быстрого улучшения внешнего вида вашего сайта. Вы можете использовать CSS для добавления цвета, шрифтов и изменения размещения элементов. С привязкой таблицы стилей CSS к HTML-странице вы можете изменить стиль всего текста.
JavaScript - это язык программирования, и его можно использовать для добавления дополнительных функций HTML-страницам. Команды JavaScript вставляются между тегами . Они могут быть использованы для добавления интерактивных кнопок, выполнения математических расчетов и т. д.
Перед вами открывается удивительный мир веб-разработки. Дерзайте! Покорить эту вершину просто, нужно всего лишь начать.
Инструкция
Скопируйте в блокнот теги, приведенные ниже, они необходимы для создания .
Переходите к созданию каркаса сайта. Каркас создается с помощью таблицы html. Сейчас мы будем использовать следующий каркас: шапка наверху, аналогичная полоса внизу, а основной лист будет разделен на две половинки. Скопируйте код каркаса к себе в блокнот.
| Шапка сайта | |
| Подвал сайта |
Укажите размеры ячеек. Попробуйте сделать те размеры, которые указали мы, а затем решите, какие размеры нужны вам. Размеры впишите в коды каркаса (это параметры height – высота и width - ширина).
Выберите шапки, фона и подвала сайта, вставьте их в нужные теги. Картинки вставляются с помощью тега . Теперь надписи «Шапка слайда» и «Подвал сайта» должны исчезнуть.
Соедините все вставленные картинки воедино. Для этого в тег
в то место кода, где должна располагаться иллюстрация. Вместо picture введите полное имя вашей сохраненной картинки. При желании выровняйте изображение с помощью уже описанного выше параметра align. Сохраните документ и откройте его , чтобы убедиться, что изображение и текст на странице.
