Как создать простой HTML сайт в блокноте
HTML-сайты не обязательно имеют примитивный дизайн. Существует множество бесплатных HTML-шаблонов, столь же привлекательных, как и используемые в конструкторах сайтов или CMS. Но большие проекты на них делать нецелесообразно. Много страниц — много хлопот, потому что редактирование каждой требует копания в коде. У них нет панели управления, и все страницы будут статичными — никаких блогов, форумов и т д.
Несколько слов о HTML
С одной стороны, создание универсального синтаксиса для маркировки интернет-страниц позволило этому Интернету вырасти из сетевой технологии в современный WEB со всем его многообразием. С другой стороны, это можно сказать о любом языке программирования — он помогает преобразовывать логические структуры в машинный код. Но чтобы получить более-менее понятный результат, нужно проделать большую работу: изучить и знать синтаксис досконально, а на это может уйти много времени и сил, набраться опыта в создании собственных скриптов и т.
д., а это еще больше времени.
HTML был предназначен для добавления интерактивности скучным «листам» документов, которые были практически единственным типом контента в первые дни существования Всемирной паутины (из-за низкой скорости).
По сути, это язык разметки, позволяющий выделять определенные элементы страницы и задавать для них определенные параметры (размер, шрифт, тип: это изображение, текст, ссылка, видеофайл и так далее).
<html> Основной тег, который открывает и закрывает web-страницу. По <html> браузер понимает, что имеет дело с веб-документом.
<head> Включает ключевые данные, касающиеся web-страницы (заголовок, ключевые слова, описание). Располагается первым после <html>.
<title> Размечает основной заголовок страницы для браузера.
<body> Тело страницы, куда вставляется содержимое для пользователей — текст, картинки, заголовки и т. д.
HTML-страницы обычно оформляются как целевые страницы и страницы-визитки.
В этих сценариях они себя более-менее оправдывают — работают быстро, не нагружают сервер, не требуют подключения к БД. Весь контент находится на самих страницах. HTML отвечает за макет, блочную структуру, а с помощью каскадных таблиц стилей (CSS) этим элементам можно придать необходимый вид и формат (шрифт, цвет, фон, форму, отступ и т д.).
Вёрстка в HTML может быть табличной (table — устаревший стандарт) и блочной (div — это то, что используют сейчас). Язык использует обширный набор тегов, почти все из которых используются парами — открывающие и закрывающие теги (например, тег абзаца), которые содержат содержимое. CSS использует атрибуты, свойства и их значения, которые связаны с отдельными элементами в HTML-скелете страницы. То есть можно выборочно придать желаемый вид каждому элементу сайта в отдельности. Мы не ставим целью научить вас синтаксису языков — при необходимости вы без труда найдете сотни уроков и справочников по ним в сети. Мы покажем вам основы — как создать простой HTML-сайт в Блокноте, создать сайт своими руками по тем же стандартам, которые используют все сайты, которые вы посещаете.
На примере можно уловить суть процесса, оценить для себя, интересна ли вообще эта тема.
Шаг 1 — Создайте HTML-страницу.
Откройте стандартный блокнот Windows (или другой текстовый редактор — Notepad++, Sublime Text — любой), откройте меню «Файл», выберите «Сохранить как», измените кодировку с ANSI на UTF-8 (для корректного отображения русского языка) буквы в браузере), введите название веб-страницы и измените расширение на html (оно стоит после точки), после чего сохраните изменения.
Шаг 2. Добавление разметки веб-страницы.
Теперь приступим к редактированию файла. Первый шаг — добавить -web markup — стандартный фрагмент кода, который позволяет браузерам распознавать содержимое, находящееся внутри внутренних тегов. Просто скопируйте и вставьте его:
<!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
<title>Топовый сайт новичка</title>
</head>
<body>
<h2>Это тег заголовка первого уровня для содержимого страницы</h2>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац и т.
д.</p>
</body>
</html>
д.</p>Это основные элементы, которые можно найти на любом веб-ресурсе. Весь контент страницы должен находиться между тегами (это основная часть документа), все, что выходит за их пределы выше и ниже, отображаться на сайте не будет.
Шаг 3 — Работа со стилями CSS
Допустим, вы добавили текст в абзацы, теперь вам нужно их стилизовать — выбрать шрифты, фон, отступы, ширину области страницы и т д. Это может выглядеть так:
body {
background: #F2F2F2;
max-width: 900px;
margin: 10px auto;
padding: 30px;
}
h2{
color: #4C4C4C;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #BEBEBE;
}
p{
font:italic;
}
В примере вы видите фон цвет (фон) и значение этого атрибута (#F2F2F2), ширина страницы (900 пикселей), отступы, цвет заголовка, отступы от тела и границ страницы (отступы и поля), а также 2-пиксельная цветная рамка для нижняя часть сайта (border-bottom).
<!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
<title>Топовый сайт новичка</title>
<style>
body {
background: #F2F2F2;
max-width: 900px;
margin: 10px auto;
padding: 30px;
}
h2{
color: #4C4C4C;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #BEBEBE;
}
p{
font:italic;
}
</style>
</head>
<body>
<h2>Это тег заголовка первого уровня для содержимого страницы</h2>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац и т. д.</p>
</body>
</html>
Как видите, мы добавили свойства CSS между тегами .
После выполнения всех операций сохраните результат. Теперь, если вы попытаетесь открыть получившуюся страницу, она автоматически запустится в браузере. Поздравляем, вы создали свой первый простой веб-сайт в Блокноте.
Шаг 4 — заливка сайта на хостинг
Понятно, что сайт из примера не из тех, что опубликованы в интернете и используются для этого на платном хостинге. Но если вы будете следовать тем же принципам, изучив HTML и CSS, создадите действительно ценный веб-сайт для достижения каких-то целей, для его отображения в сети потребуется хостинг и домен
.
Выбор хоста – важная задача. Веб-сайты HTML легкие и не требуют сверхспособностей для работы, но мы все же рекомендуем использовать качественный хостинг, такой как Bluehost. Это один из самых надежных и популярных зарубежных провайдеров с огромной клиентской базой (обслуживает более 2 млн доменов), внушительным количеством серверов по всему миру (около 120) и хорошими отношениями.
Это стоит 2,95 доллара в месяц, плюс бесплатный домен на первый год, бесплатный SSL и другие интересные плюшки.
Скорость страниц Bluehost в Рунете высокая, так как сервера находятся в облаке, используется технология CDN. Провайдер пуленепробиваемый — это значит, что ваш сайт не закроют ни при каких обстоятельствах — можно не бояться жалоб от конкурентов и прочего. Все будет работать надежно. Техническая поддержка круглосуточно. Чтобы запустить HTML-сайт на хостинге, нужно просто скопировать файлы в каталог с доменным именем. Можно использовать встроенный FTP-сервер или программу типа Filezilla, но в этом случае ее нужно настроить для работы с хостингом. База данных не требуется.
Выводы и рекомендации
Самый простой HTML-сайт можно создать в Блокноте за несколько минут. Для построения более сложных структур, способных выполнять конкретные задачи и смотреть на уровне, нужны глубокие знания HTML5 и CCS3. Такой подход полезен новичкам для обучения, приобретения базовых навыков веб-разработчика.
В общем, особого смысла создавать такие сайты в других сценариях нет — гораздо эффективнее использовать конструкторы сайтов (например, uCoz, uKit и другие) или даже движок WordPress, если есть опыт.
Выбор хостинга важен, независимо от того, на чем построен ваш сайт. Что касается конструкторов, то не обязательно (все необходимое вы получаете прямо из коробки), а вот для сайтов на CMS и чистом HTML стоит использовать Bluehost. Именно этот хостинг официально рекомендован WordPress.org — это не случайно, провайдер очень надежный, технологичный.
Написание HTML в блокноте — gadgetshelp,com
Это программное обеспечение имеет ограничения, но оно абсолютно позволяет вам кодировать HTML. Поскольку Блокнот уже включен в вашу операционную систему, вы не можете побить цену и можете сразу начать писать HTML!
Есть только несколько шагов для создания веб-страницы с помощью Блокнота :
Открыть Блокнот : Блокнот почти всегда находится в меню « Аксессуары» .
Начните писать свой HTML : помните, что вам нужно быть более осторожным, чем в редакторе HTML. У вас не будет таких элементов, как завершение тега или проверка. На данный момент вы действительно программируете с нуля, поэтому любые ошибки, которые вы совершаете, не будут теми, которые программа может уловить для вас.
Сохраните ваш HTML в файл : Блокнот обычно сохраняет файлы в формате .txt . Но так как вы пишете HTML, вам нужно сохранить файл в формате .html . Если вы этого не сделаете, у вас будет только текстовый файл с HTML-кодом.
Если вы не будете осторожны на третьем шаге, вы получите файл с именем filename.
html.txt .
Вот как этого избежать:
Нажмите Файл и затем Сохранить как .
Перейдите в папку, в которую вы хотите сохранить.
Измените раскрывающееся меню Сохранить как тип на Все файлы (*. *)
Назовите свой файл. Обязательно включите расширение .html, например homepage.html .
Помните, что HTML не очень сложен в изучении, и на самом деле вам не нужно покупать какое-либо дополнительное программное обеспечение или другие предметы, чтобы открыть основную веб-страницу. Однако есть преимущества использования более продвинутого программного обеспечения для редактирования HTML.
Использование Notepad ++
Простое обновление до бесплатного программного обеспечения Notepad — это Notepad ++ . Это программное обеспечение доступно для бесплатной загрузки, поэтому, если вы пытаетесь писать HTML, не покупая дорогостоящее программное обеспечение, Notepad ++ по-прежнему вас охватывает.
Notepad — это базовый программный пакет, но Notepad ++ имеет дополнительные функции, которые делают его отличным выбором для кодирования HTML.
Прежде всего, когда вы сохраняете страницу с расширением .html (тем самым сообщая программе, что вы действительно пишете HTML), программа добавит номера строк и цветовую кодировку к тому, что вы пишете. Это значительно облегчает написание HTML, поскольку оно воспроизводит функции, которые вы найдете в более дорогих программах, ориентированных на веб-дизайн. Это облегчит кодирование новых веб-страниц. Вы также можете открыть существующие веб-страницы в этой программе (и в Блокноте) и редактировать их. Еще раз, дополнительные функции Notepad ++ облегчат вам задачу.
Использование Word для редактирования HTML
Хотя Word не поставляется автоматически с компьютерами Windows, как Notepad, он все еще встречается на многих компьютерах, и вы можете попытаться использовать это программное обеспечение для кодирования HTML . Хотя действительно можно писать HTML с помощью Microsoft Word , это не рекомендуется.
С Word вы не получаете никаких преимуществ Notepad ++, но вам приходится бороться с желанием программного обеспечения превратить все в текстовый документ. Вы можете заставить это работать? Да, но это будет непросто, и на самом деле вам гораздо удобнее использовать Notepad или Notepad ++ для любого HTML или CSS-кодирования .
Написание CSS и Javascript
Как и HTML, CSS и Javascript файлы на самом деле являются просто текстовыми файлами. Это означает, что вы также можете использовать Notepad или Notepad ++ для написания каскадных таблиц стилей или Javascript. Вы просто сохраните файлы, используя расширения файлов .css или .js, в зависимости от того, какой тип файла вы создаете.
Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирар.
Как создать веб-сайт с помощью HTML-кодов в Блокноте – Что такое Mark Down
Чтобы создать веб-сайт с использованием HTML-кодов в Блокноте, необходимо выполнить несколько шагов. Сначала откройте Блокнот и введите следующий код: Затем сохраните файл как index.
html в новой папке. Затем откройте файл index.html в веб-браузере, чтобы просмотреть результаты. Создание веб-сайта с использованием HTML-кодов в Блокноте — довольно простой процесс, который можно выполнить всего за несколько минут. Следуя описанным выше шагам, любой может создать базовый веб-сайт, используя только текстовый редактор.
HTML — это язык разметки, используемый для создания гипертекстовых документов. Чтобы создать веб-страницу, вы должны использовать HTML — язык программирования, содержащий код и программы. Сегодня мы покажем вам, как использовать редактор Блокнота для создания HTML-документа. Узнайте больше о тегах HTML и создайте больше веб-страниц HTML в этом курсе.
Просматривайте исходный код только с помощью команды Ctrl U на клавиатуре вашего компьютера. Во всплывающем меню нажмите Просмотреть источник в контекстном меню пустой страницы.
Можем ли мы ввести Html в блокноте?
Блокнот можно найти, введя «Блокнот» в строку поиска Windows.
HTML можно добавить в Блокнот, набрав HTML в Блокноте. Файл в разделе Сохранить как. htm: Unflocked Кодировка: UTF-8
Кроме того, вы можете выбрать команду «Текст» в меню «Вставка», а затем ввести текст, который вы хотите отобразить в верхней части документа. После того, как вы закончите редактирование документа, вы можете сохранить или закрыть его, выбрав меню «Файл». Это текстовый редактор, оптимизированный для языков программирования, что делает его идеальным для работы с такими языками, как C, пакетная обработка и HTML. Файлы HTML можно изменить, отредактировав их с помощью Блокнота. Тем не менее, вы должны использовать Блокнот, потому что это очень простой текстовый редактор, который быстро и легко редактирует ваши HTML-документы . В Блокноте вы найдете те же функции, что и в других программах: Открыть, Сохранить, Сохранить как и Закрыть. Меню «Вставка» можно использовать для выбора команды «Текст», чтобы строка текста отображалась, например, в верхней части документа, а затем введите текст, который вы хотите отобразить.
Как создать веб-сайт с помощью HTML-кода
Кредит: Pinterest
. После того, как вы создали документ, вам нужно будет сохранить его как файл .html. Для этого вам нужно будет выбрать «Все файлы» в раскрывающемся меню «Тип файла», а затем ввести расширение .html после имени вашего файла. После того, как вы сохранили файл, вы можете открыть его в веб-браузере для просмотра своего веб-сайта.
Как создать веб-сайт с помощью Блокнота с картинками
Предположим, вам нужны инструкции по созданию веб-сайта с помощью Блокнота:
1. Откройте Блокнот на вашем компьютере.
2. Введите следующий код:
Мой первый абзац.
3. Сохраните файл как index.html в новой папке.
4. Откройте файл index.html в веб-браузере, чтобы просмотреть новый веб-сайт.
В этом уроке с помощью Блокнота мы создадим полностью функциональный веб-сайт.
Мы можем создать целевую страницу с помощью Bootstrap, популярного CSS-фреймворка. Мы будем использовать веб-хостинг SiteGround для размещения нашего веб-сайта. Если вы не знакомы с HTML, это отличное место для начала. Третий шаг — загрузить и установить FTP-клиент FileZilla для загрузки файлов на новый веб-сайт. Чтобы войти на FTP, вы должны сначала ввести данные для входа на FTP в клиентскую зону хостинга. Для просмотра Источник HTML страницы, щелкните правой кнопкой мыши и выберите Просмотреть источник или выберите Ctrl U ( U на Mac). Следующим шагом будет добавление большего количества контента в HTML-файл и улучшение CSS.
Как вставить изображение в HTML с помощью Блокнота?
HTML-страницы можно легко изменить, включив в них изображения из Complete HTML /CSS Course 2022. Если вы хотите вставить изображение в HTML-страницу, вы должны включить теги *img. Этот тег не является закрывающим, поскольку содержит только атрибуты. Убедитесь, что для тега *img* установлено значение *body>…
Можно ли сохранять изображения в блокноте?
Вы можете сделать картинку в блокноте, выполнив следующие действия.
В отличие от Блокнота, мы можем включить изображение в наш HTML-документ; однако Блокнот также включает изображение. Нам нужно использовать атрибут src тега IMG и тег изображения в Блокноте, чтобы добавлять/удалять фотографии.
Простой HTML-код
Кредит: henryegloff.com
HTML-код — это код, который используется для создания веб-страниц. Это простой код, который может изучить любой, кто интересуется созданием веб-сайтов. В Интернете доступно множество ресурсов, которые могут помочь вам изучить HTML-код.
HTML (язык гипертекстовой разметки) — это язык, используемый для создания веб-страниц. язык разметки — это язык, описывающий структуру веб-страницы. HTML состоит из ряда элементов, которые вы используете для включения или переноса различных частей контента. Элементы также могут включать следующие характеристики: Некоторые элементы не содержат содержимого, что называется пустым элементом. Элемент >img> не оборачивает содержимое; скорее, он встраивает изображение в положение зрителя.
В качестве альтернативы вы используете описательный текст, чтобы описать изображение тем, кто его не видит. Элемент заголовка позволяет вам указать, какие разделы вашего контента должны быть помечены как заголовки или подзаголовки.
Хотя в HTML используется шесть уровней заголовков, наименее распространенными являются три-четыре, хотя вы можете использовать до шести. Вы не должны использовать элементы заголовков, чтобы сделать текст крупнее или жирнее, поскольку они выполняют множество функций, включая доступность и SEO. Добавьте образец текста (из «Как будет выглядеть ваш веб-сайт?») на один или два абзаца ниже вашего элемента, а затем вставьте его непосредственно под ним. Если вы будете следовать этим инструкциям, у вас должно получиться следующее: Страница ниже также доступна здесь. Если у вас возникли проблемы с вашим проектом, всегда полезно сравнить свою работу с кодом, который мы создали на GitHub. Пожалуйста, добавьте ссылку на свою страницу сейчас, чтобы другие могли получить к ней доступ.
Копирование и вставка HTML-кода веб-сайта
Параметр «Источник страницы» находится в разделе «Инструменты». Чтобы получить доступ к коду страницы, нажмите кнопку «Новая вкладка», которая откроет новую вкладку, содержащую код страницы, выделение определенной области или щелчок правой кнопкой мыши, чтобы выбрать все, если вы хотите все это. Нажав Ctrl C или Command C на клавиатуре, вы можете создать текстовый файл или файл документа.
Как создать веб-сайт с помощью HTML, CSS, копирования/вставки кода и перетаскивания. В эпоху тысячелетия широко признано, что веб-сайты являются одним из самых мощных инструментов распространения информации. Как вы увидите в следующих разделах, эта статья проведет вас через шаги, необходимые для создания простая веб-страница , которая в конечном итоге станет вашим веб-сайтом. Выбрав Блокнот для Windows, TextWrangler для Mac или Sublime Text, вы можете начать редактирование текста. Написание кода в Microsoft Word и Pages неприемлемо, поскольку они представляют собой текстовые редакторы с расширенным форматированием.
Когда вы откроете файл в браузере, вы ничего не увидите, потому что мы только создаем раздел страницы. То же самое и с веб-сайтами: они представляют собой не что иное, как ряд, казалось бы, бессмысленных ссылок.
В отличие от приведенного выше текста синего цвета, это содержимое, которое не является кодом и может быть изменено в зависимости от ваших предпочтений. Мы будем более эффективными, используя такие свойства, как ширина, высота, поля, отступы, положение и отображение. Создайте документ style.css и сохраните эти коды CSS как текст. В результате вы должны настроить макет так, чтобы все разделы были установлены на 100% высоты области просмотра, что означает, что размер экрана полностью заполнен. На шаге 7 мы завершим нашу веб-страницу некоторыми последними штрихами. Может быть полезно прочитать статью на Jimdo, в которой рассказывается, как выбрать лучший фон для вашего сайта. Если вы хотите добавить больше кодов, прежде чем вводить выбранные изображения, сделайте это так же, как на шаге 6.
Изображения взяты с веб-сайта Scontent.fna FCgk18-2.fna. Вы можете изменить фон своих изображений, вставив URL-адреса в текст зеленого цвета выше. Мы добавили полупрозрачное наложение поверх фоновых изображений, используя приведенные выше коды.
Примеры HTML-страниц с исходным кодом
Лучший способ научиться кодировать в HTML — это найти несколько примеров веб-страниц с исходным кодом и изучить их. Это покажет вам, как HTML-код используется для создания различных элементов на веб-странице и как вы можете использовать код для управления макетом и внешним видом ваших собственных веб-страниц. Есть множество примеров веб-страниц HTML с исходным кодом, доступным в Интернете, так что найдите время, чтобы изучить и найти те, которые вы можете изучить.
HTML-код
HTML-код — это код, который используется для создания веб-сайтов. Он состоит из ряда элементов, которые используются для определения структуры и содержимого веб-страницы. HTML-код пишется в текстовом редакторе и затем сохраняется в виде файла .
html. Когда веб-браузер открывает файл .html, он считывает код и отображает страницу.
HTML содержит ряд элементов, определяющих ввод данных пользователем и компьютерный код. HTML-элемент определяет ввод с клавиатуры, тогда как HTML-элемент >samp; элемент определяет образец вывода, сгенерированный компьютером. Внутри окна для отображения содержимого используется моноширинный шрифт. Другими словами, убедитесь, что в элементе кода нет лишних пробелов или разрывов строк.
Веб-страница Html
HTML (язык гипертекстовой разметки) — это код, используемый для создания содержимого веб-страницы и его структурирования. Например, набор абзацев, маркированный список точек или таблицы данных можно использовать для структурирования контента.
HTML, как следует из названия, является языком гипертекстовой разметки. Этот язык использует как разметку, так и гипертекст. HTML-документ можно создать в любом текстовом редакторе, включая Блокнот. Мы можем использовать эти теги, чтобы сделать HTML-страницу более привлекательной.
0004 с этими тегами. Этот тег HTML определяет упорядоченный список с помощью тега HTML и/или OOL. Порядок списка может быть числовым или алфавитным. Первое слово каждого пункта начинается с буквы *.
Атрибут type может использоваться для определения типа порядка требуемого нам упорядоченного списка. Обычно тег изображения используется для соединения двух веб-страниц. Вот как мы создаем простую веб-страницу для GeeksforGeeks.com с использованием Java. Несколько вещей, если они не включены, могут вызвать проблемы или неэффективное программирование на Java. Код Java обычно более устойчив к изменениям, чем код C.
Создание страницы в HTML
Тег Html можно использовать для создания HTML-страницы. В теге html требуются как атрибут title, так и атрибут content: для атрибута title должно быть задано имя файла, а для атрибута content должна быть задана пустая строка.
В дополнение к тегу HTML можно указать два других атрибута: lang, указывающий язык документа, и type, указывающий его тип.
Руководство для начинающих по HTML и CSS
Указатель
О
Часть 1: HTML
- Инструменты
- Начало работы
- Базовое форматирование
- Заголовки и списки
- Ссылки и изображения
- Коробки в коробках
К части 2: CSS
Кредиты
О программе
Здравствуйте. Меня зовут Паули Кохбергер, я писатель, художник и графический дизайнер. После перехода с одного сайта социальной сети на другой я недавно решил создать и поддерживать различные веб-страницы на Neocities.org, чтобы иметь более постоянное место для размещения личной работы.
Я знаю много других людей, которые находятся в той же лодке, что и я. Я пишу это менее чем через полчаса после новости о том, что Vine закроют, оставив свою пользовательскую базу в беде. Таково состояние Интернета в наши дни: найти место, где чувствуешь себя как дома, а потом вдруг оказаться без него.
Переезжать с места на место, мягко говоря, утомительно и утомительно. Итак, я хотел бы немного научить людей тому, как создать и поддерживать веб-страницу или веб-сайт.
(Для справки, веб-сайт может состоять из множества веб-страниц , , но не обязательно. В конце концов, сам этот сайт — всего лишь одна страница!)
Инструменты
Хорошее новость в том, что вам не нужно много писать HTML или CSS! Это всего лишь текст на странице, поэтому простая программа, например Блокнот, справится с задачей. Лично я использую скобки.io, легкий и простой в использовании редактор, ориентированный на веб-разработчиков, бесплатный и с открытым исходным кодом для Windows, Mac и Linux. Конечно, есть и другие инструменты, но это тот, с которым я знаком больше всего.
Пока предположим, что вы используете Блокнот. Даже если вы этого не сделаете, этим инструкциям должно быть легко следовать независимо от того, какие инструменты вы используете.
Начало работы
Сначала создайте новую папку на своем компьютере и назовите ее как хотите.
Например, я назвал этот тест .
Теперь откройте текстовый редактор на пустой странице. Сохраните его как
index.html . (Если появится окно, подобное приведенному ниже, просто нажмите «Использовать .html».) Это будет главная страница нашего веб-сайта — первая, которую увидит зритель.Затем введите следующий текст или скопируйте и вставьте его, если хотите (не беспокойтесь об отступах, они нужны для облегчения чтения кода):
Заголовок веб-сайта идет здесь Привет мир!Когда вы открываете этот файл в веб-браузере, таком как Chrome или Firefox, вы должны увидеть это:
Теперь у вас есть код HTML для вашей самой простой веб-страницы. Это может показаться немного сложным, но сейчас мы просто сосредоточимся на том, что находится внутри тега.
Базовое форматирование
Это сделает ваш текст разбитым на абзацы.
Это другой абзац.
Этот текст выделен курсивом.
Этот текст выделен жирным шрифтом.
Сохранить. Если ваш файл все еще открыт в вашем браузере, обновите его, и вы должны увидеть это:
Это действительно хорошее начало для создания веб-страницы! Окружая текст тегами
и
, вы можете разделить его на абзацы. Теперь давайте попробуем что-нибудь более структурированное...Обо мне
Меня зовут XYZ и я ?? лет.
вещей, которые мне нравятся
- Видеоигры
- Мультфильмы
- Действительно хороший суп
Вот так! Теперь у вас есть заголовки , , которые используются для разделения текста на разные разделы, а также маркированный список
.
(Примечание: «ul» в
означает «неупорядоченный список», а «li» в означает «элемент списка». заменить
Итак, это охватывает некоторые основные способы организации текста. Но как насчет других основных строительных блоков, таких как изображения и исходящие ссылки?
Где-то в файле index.html добавьте этот код в конце:
Это создает ссылку на Google.com.
Сохраните и обновите файл в браузере. Нажмите на ссылку, и вуаля, страница Google. Чтобы сделать ссылку на другой URL, просто замените
"http://google.com" с "http://whateverurl.com" . Если то, на что вы ссылаетесь, находится в вашем собственном веб-пространстве, например, на дополнительной странице вашего сайта, вам даже не нужно вводить все это: вы можете просто написать "/page2. html" или любое другое название ваш файл. Но не забудьте сохранить кавычки!
html" Для вставки изображений в HTML-файл используется очень похожий код. Например, я поместил изображение под названием «slime.png» в папку «images», которая находится в папке моего основного сайта. Если я хочу разместить это изображение на этом сайте, я наберу:
Вот это и появляется!
Таким образом, вставка изображений очень похожа на создание ссылки. Вместо того, чтобы помещать URL-адрес веб-сайта в эти кавычки, вы вводите путь к своему изображению. (Вы можете ссылаться на изображения с других веб-сайтов, но это называется хотлинкингом, и делать это нехорошо.)
Коробки в коробках
Теперь вы могли заметить, что все эти элементы, которые мы написали, являются уложены друг в друга.
9Элементы 0184 размещаются внутри тега
. Даже тег , который содержит весь написанный нами текст, расположен внутри всеобъемлющего блока .