Оглавление
§1. Введение
Это руководство доступно для скачивания в формате PDF. Скачать научиться говорить «Интернет»: ваше руководство по xHTML сейчас. Не стесняйтесь копировать и делиться этим со своими друзьями и семьей.
§2 — Начало работы с xHTML
§3 – Дизайн с использованием CSS
§4 – Дополнительная информация
1. Введение: что такое xHTML?
Добро пожаловать в мир XHTML — Расширяемый язык гипертекстовой разметки — язык разметки (похожий на программирование), который позволяет любому создавать веб-страницы с множеством различных функций. Во многих отношениях это основной язык Интернета.
Итак, почему мы заботимся?
Ну, разве вы никогда не хотели иметь свой собственный сайт? Или сделать свою собственную игру? Роль этого руководства — дать вам почувствовать вкус этого могущественного мира. Если у вас есть опыт программирования, то вам, конечно, будет проще, чем если вы только начинаете свое программирование. В любом случае, я надеюсь объяснить это, чтобы даже новичок мог понять.
Мы заботимся о xHTML, потому что это сильная отправная точка для изучения основных строительных блоков в Интернете. Сайты социальных сетей, такие как Facebook, MySpace и Twitter, используют другой (серверный) язык программирования, называемый PHP, но это хорошая идея, чтобы понять основы, прежде чем погрузиться в мир программирования. Это руководство об основах.
Если вы хотите узнать больше о том, как работает Интернет или, возможно, о том, как работают компьютерные сети со всеми этими техническими материалами, или даже о том, как можно создавать компьютеры, то попробуйте эти замечательные руководства от своих друзей в MakeUseOf:
//www.makeuseof.com/pages/the-guide-build-your-own-pc
//www.makeuseof.com/pages/easy-guide-computer-networks
//www.makeuseof.com/pages/guide-file-sharing-networks
//www.makeuseof.com/pages/download-the-ultimate-windows-7-guide
//www.makeuseof.com/pages/download-how-the-internet-works
2. Начало работы с xHTML
В этой главе вы узнаете, как создавать и настраивать веб-сайты различными способами, в том числе учиться:
• Добавить изображения на веб-страницы.
• Создавать и использовать гиперссылки для навигации по веб-страницам.
• Настройте списки информации, используя точки и т. Д.
• Создавать таблицы со строками и столбцами случайных данных и иметь возможность контролировать форматирование этих таблиц.
• Создавать и использовать формы, с которыми вы можете взаимодействовать.
• Сделать веб-страницы доступными для поисковых систем.
Все это будет сделано с помощью программирования xHTML. Не веришь в это? Читать дальше. Вы будете удивлены, сколько вы можете узнать из такого короткого руководства.
Прежде чем мы действительно перейдем к части «Руководства по программированию» этого руководства, вам понадобится некоторое программное обеспечение, которое вы сможете редактировать, тестировать и в основном разрабатывать ваши программы. Зайдите на сайт www.dreamspark.com и получите БЕСПЛАТНО одну из следующих программ, если вы студент:
• Microsoft Visual Studio 2010
• Expression Studio 4
Если вы не студент, вы также можете использовать Notepad ++, который вы можете довольно легко получить с www.notepad-plus-plus.org
Как только вы получите одну из программ и установите ее, вы сможете приступить к работе с xHTML.
Вы можете использовать Mac или Linux вместо Windows; Вам нужно найти текстовый редактор, который подходит вам в этом случае. Попробуйте найти тот, который показывает вам количество строк и код цвета для вас.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/
Если вы не хотите загружать какие-либо специальные инструменты, вы все равно можете использовать текстовый редактор, такой как Блокнот или же Word Pad. Тем не менее, вышеперечисленные программы являются гораздо более эффективными инструментами для тестирования и проектирования, а также помогают вам в кодировании, так как они подскажут вам, если вы допустили ошибку или пытаетесь вспомнить правильное слово для использования. Просто лучше, верно? Я лично использую Notepad ++ и Microsoft Visual Studio, хотя я слышал много замечательных вещей о Expression Studio 4. Вы должны решить, что вам больше нравится, но все они работают просто отлично.
НОТА: Для тестирования веб-сайта, созданного с помощью Блокнота или Wordpad:
Открыв файл, нажмите Файл >> Сохранить как
В конце имени файла введите.HTML и нажмите Сохранить
Откройте недавно сохраненный файл (он откроется в вашем браузере по умолчанию)
2.1 Знакомство с «миром»
Хорошо, вот начало пути. Давайте начнем с размещения чего-либо на экране на этой веб-странице. Сначала вам нужно знать, что являются. Код XHTML использует начальный и конечный теги для сортировки того, что происходит с каждым элементом страницы.
Вот пример начального тега:
Вот пример конечного тега:
Увидеть разницу? У одного имя элемента заключено в заостренные скобки, а у другого — то же, но перед именем элемента стоит косая черта.
ВАЖНЫЙ: Вы должны закрыть тег после того, как откроете его в какой-то момент кода. Также теги должны быть вложенными, то есть, вы не можете делать следующее:
; так должно быть
. Видите, как метки вписываются друг в друга? Думайте о них как о коробках: вы не можете положить что-то твердое в полторы коробки.
Лучший способ узнать, как программировать, — это на самом деле делать это, поэтому достаточно теории. Просто для справки, я собираюсь обозначить каждую строку кода номером, чтобы построчно объяснять, что происходит.
В строке 1 я указал HTML-код, а в строке 5 я закончил его. Внутри тега есть, а внутри есть абзац (строка 3,
). Если вы откроете это в веб-браузере, то увидите на экране следующее:
Если вы хотите изменить заголовок страницы с точки зрения браузера (например, firstpage.html), вы можете легко добавить следующую строку кода:
Введите название здесь
Это сделает вашу веб-страницу более профессиональной.
2.2 Начиная с и вниз по
В большинстве случаев внутри тега есть a и a.
Обычно используется для создания сценариев в CSS (раздел 3) и JavaScript (будет объяснено в следующем руководстве), тогда как обычно это содержимое страницы.
Некоторый контент может быть изменен с помощью скриптов в, но обычно это контент, который нельзя изменить на странице. Примером может служить краткий рассказ о веб-сайте, который вы посещаете.
Вы можете внести изменения в форматирование содержимого с помощью CSS (раздел 3) в. Однако вы также можете внести изменения в форматирование в.
Обычно используемый набор тегов, используемых в теле, — это шрифты заголовков. Эти шрифты заголовка варьируются по размеру и прочности / смелости. Просто убедитесь сами:
2.3 Ваша фотография стоит тысячи слов? — Изображений
До сих пор мы говорили только о тексте и о том, что он может делать на веб-сайте, но это еще не все. Хотите, чтобы ваш сайт выглядел еще более заманчивым, чем просто модные шрифты? Попробуйте получить хорошие изображения, которые сделают ваш сайт действительно полезным для зрителей. Будьте осторожны с законами об авторских правах, хотя; Лучше всего делать свои собственные фотографии, если вы собираетесь разместить свой сайт в Интернете.
Возможно, вам понадобится использовать Photoshop или некоторые навыки работы с цифровыми изображениями, чтобы создать великолепную картинку или улучшить собственное изображение и сделать его еще более потрясающим. Попробуйте эти руководства для некоторых полезных советов и идей:
• //www.makeuseof.com/pages/download-idiot-guide-photoshop
• //www.makeuseof.com/pages/guide-to-digital-photography
Наиболее популярные форматы изображений:
• GIF = графический формат обмена
• JPEG = Объединенная группа экспертов по фотографии
• PNG = Портативная сетевая графика
Посмотрите на приведенный ниже код, и я объясню, что это значит; то есть, как добавить изображения на свою веб-страницу.
Как говорилось в предыдущих разделах, мы всегда начинаем с тегов и co. Далее тег открывается в строке 5. Давайте просто перейдем к важным вещам …
После открытия абзаца в строке 9 именно здесь изображения вставляются на веб-сайт. Чтобы добавить картинку / изображение, вы должны использовать начать с. Далее необходимо указать, где находится файл. Обычно вы пытаетесь поместить этот файл в ту же папку, что и файлы веб-сайта, в противном случае вам придется ввести путь к папке, в которой он существует. В приведенном выше случае я использовал
. Это означает, что источник (SRC) изображения находится в той же папке, и имя этого файла изображения Picture.jpg. Легко ли?
Вам не нужно добавлять ничего, кроме создать изображение с альт свойство, но вы можете добавить свойства, чтобы внести в него некоторые изменения.
Также известен как альтернативный текст, значение этого свойства отображается при наведении курсора мыши на изображение.
Вы можете заметить, что в строке 10 я начал тег с и закончил это />. Это еще один способ открытия и закрытия тегов. Это обычный способ создания изображений, потому что вы можете выбрать различные свойства изображения, такие как ширина и высота, как показано в примере выше.
В строках 11 и 12 вставлено другое изображение, но для открытия и закрытия тегов используется другой метод. Линия 10 создает изображение намного аккуратнее; используйте это, а не метод в строках 11 и 12.
2.4 Гиперссылки, куда они могут перейти?
2.4.1. Перемещение «мира»
Хотите показать своим друзьям несколько интересных сайтов на вашем сайте, но не знаете как? Вы пришли в нужное место, читайте дальше …
Посмотрите код ниже и посмотрите, сможете ли вы угадать, что я делаю, прежде чем я объясню это.
Это верно, я создаю гиперссылки на некоторые замечательные и полезные сайты. В основном, чтобы создать гиперссылку на определенную веб-страницу, имеющую веб-адрес, вы просто используете следующий синтаксис:
[что вы хотите, чтобы гиперссылка]
Не кажется ли это очень сложным, не так ли? Вы можете довольно просто поместить туда текст, как в примере выше. Однако нет никаких причин, по которым вы не могли бы использовать что-то другое, например изображение. Просто для дополнительной информации: URL — это унифицированный указатель ресурса, в основном веб-адрес.
2.4.2 Фотографии напоминают вам о том, где вы были, и снова доставляют вас туда
Вот пример использования изображения в качестве гиперссылки:
Я уверен, что если вы читали предыдущие части этого раздела, которые вы выпускаете, то это просто смешивание создания изображений и гиперссылок. Синтаксис настроен так, чтобы гиперссылка была на внешней стороне, а изображение — на внутренней стороне, посредством чего размещалась гиперссылка на вставленное изображение.
2.4.3 Вы получили почту — гиперссылка на адрес электронной почты
Это просто повторение последней части, но если вы не обращали так много внимания, просто взгляните на код ниже:
Вместо того, чтобы использовать URL (например, http://www.something.com), я использую адрес электронной почты, который включает следующий синтаксис после знака равенства:
«Электронная почта: [youremailaddress]»
Строка 10 является основным примером этой концепции. Так кому ты собираешься написать? Ghostbusters!
2.4.4 Путешествие по миру — внутренняя гиперссылка
Теперь вы можете видеть, как вы обойдете свой собственный сайт. Это делается просто с использованием вашего имени файла в качестве URL. Поэтому вы можете настроить сайты, как показано на диаграмме ниже. Синтаксис, который вы используете, будет выглядеть примерно так:
Следующая Страница
2.5 Ты особенный? Эти персонажи …
Когда вы вводите информацию, которая будет отображаться на веб-сайте, например контент, вам может понадобиться ввести что-то вроде символа, например символа авторского права: © или, возможно, символ меньше или больше, чем. Но так как нормальные символы используются синтаксисом кодирования, тогда должен был быть другой способ преодолеть это маленькое препятствие, и решение было использовать амперсанд () и затем короткий код, чтобы сообщить компьютеру, какой символ вставлять Ниже приведена таблица с несколькими примерами специальных символов из кода:
Например, вы можете сказать:
Есть < шесть строк в таблице выше, но > 2 ряда
Есть 2 ряда
2.6 Списки, списки и другие списки
Хорошо, теперь нам нужно организовать несколько вещей, например, список покупок. Есть два типа списков. Они:
• Упорядоченный список (цифры, алфавиты, римские цифры)
• неупорядоченный список (маркеры)
Для упорядоченного списка вы бы использовали следующие теги =
Для неупорядоченного списка вы должны использовать следующие теги =
Например:
В приведенном выше примере я включил неупорядоченный и упорядоченный типы списков. Но ты заметил, что еще я сделал? Я также включил технику под названием Вложенные списки. Эти вложенные списки могут использоваться для представления иерархических отношений, например, список ингредиентов в
Путеводитель Опубликовано: июнь 2011
