Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Лабораторно-практичні роботи по HTMLСодержание книги
Поиск на нашем сайте
Лабораторно-практичні роботи по HTML Глава 1 Что такое HTML язык HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа. Теперь о командах - их называют дескрипторами, но чаще - тегами. Вернемся к нашей первой страничке.. итак мы написали: <html> Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег <html> понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег </html> говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью. Так что же мы написали? и как это читает браузер? Мысли браузера: <html> - начало документа.. опять работы привалило.. Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи: 1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий </…> Хотя есть и исключения как например у нас тег <br> - он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить") 2) Все документы должны иметь вот такой шаблон кода: <html> - начало документа Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову.. 3) О порядке: Открывающий и закрывающий тег по типу <…> </…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так: <Тег "большой ящик"> Если писать, например, так: <Тег "большой ящик"> То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет.. Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать.. Полезные советы: · При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего! · При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймете, что читать код написанный вот так: <html> Значительно легче, чем так: <html> И уж тем более чем вот так: <html><head><title>Моя первая страничка</title></head><body>Привет мир!!!<br>Меня зовут Карлсон, это моя первая страничка!</body></html> Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".
Глава 2 Параграф. Я думаю, Вы знаете, что такое параграф.. это такой кусочек текста, одно или несколько предложений, который в книгах обычно печатается с новой строки, тем самым, выделяя этот текст из основной массы, Книгу разбитую на параграфы легко читать, потому что, как правило, одному параграфу соответствует одна мысль или логическая часть текста. Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> - собственно параграф. Параграф имеет атрибут align "выравнивание" который в свою очередь может быть равен тому ли иному значению. Рассмотрим на примерах: С помощью параграфа можно расположить наш текст по центру: <p align="center">Привет мир!!!</p> По левому краю: <p align="left">Привет мир!!!</p> По правому краю: <p align="right">Привет мир!!!</p> Или же обоим краям документа: <p align="justify">Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа </p> Давайте слегка изменим нашу первую страничку: <html> Так уже лучше, не правда ли? Запомним некоторые вещи: 1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так: <p> Нельзя! - это нелогично, как может один параграф содержать в себе другой? 2) Так же, нельзя писать пустые теги без текста или других тегов. <p> здесь, что-то обязательно должно быть!!!</p> 3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align="left" для параграфа можно не указывать. 4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пшится так: <div align="center">Привет мир!!!</div> Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу: <div> А вообще тег <div> многофункциональный.. и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже.. 5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так: <center>Привет мир!!!</center> Заголовки В наборе тегов html языка имеется шесть типов заголовков: <h1> Привет мир!!! </h1> <h2> Привет мир!!! </h2> <h3> Привет мир!!! </h3> <h4> Привет мир!!! </h4> <h5> Привет мир!!! </h5> <h6> Привет мир!!! </h6> Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки - на то он и заголовок. Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст? Знакомимся тег <font> в переводе на русский - "шрифт".. Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size - размер. Пишется и выглядит это так: <font size="+4"> Привет мир!!! </font> Добавим эти теги на нашу страницу. <html> Попробуйте поэкспериментировать с размерами шрифта и заголовком, подставьте свои значения, измените расположение тегов.. Цвет Для придания страничке красивого вида не обойтись без палитры с красками.. В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:
Один и тот же цвет можно задать двумя способами: Краски есть, давайте рисовать! Мы уже знакомы с тегом <font> у него есть еще один атрибут - color. Так вот, если к примеру написать так: <font color="#ff0000"> Привет мир!!! </font> - То цвет шрифта станет красным. Попробуйте.. А можно так: <font color="red"> Привет мир!!! </font> - Будет тоже самое.. Но советую писать всё же шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых, поговаривают, что не все браузеры знают названия тех или иных красок… Есть еще один способ изменить цвет текста. Тег <body> </body> "тело" - имеет атрибут text - "текст" если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы "принудительно" указали другой цвет. В строчке, где стоит открывающий тег <body> пишем так: <body text="#ff8c40 "> Теперь весь текст у нас стал оранжевым кроме заголовка "Привет мир!!!" который мы отдельно перекрасили в красный. А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы <body bgcolor="#40caff"> - залили всё голубым.. Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте! Сейчас Вам нужно понять принцип построения html кода иначе рано или поздно станете в тупик.. конечно, я и дальше буду выкладывать готовые примеры, но нет ничего лучше чем самостоятельная практика. На данный момент у меня получилось вот так:.. а у Вас? <html> Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text="#ff207b" bgcolor="#1a77f0"> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками.. Стиль текста Здесь все достаточно просто.. Итак, новые теги:
Ну думаю понятно.. текст заключённый между этими открывающими и закрывающими тегами приобретёт нужный нам стиль. Вот пример на всякий случай… <html> Шрифт Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face - лицо то бишь.. Пишется так: <font face="arial"> Эта строчка будет написана с помощью шрифта Arial </font> Пример: <html> Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то "экзотические" нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратиться в обыкновенный. Предварительно отформатированный текст. Если Вы обратили внимание, а если не обратили то знайте, что в браузерах текст набранный с помощью текстовых редакторов проходит "обработку" перед выводом его на экран компьютера. Так в набранном Вами тексте удаляются все переносы строк и лишние пробелы, пробелов между словами или просто символами может быть не более одного. Проводится данная "обработка", для того чтобы на мониторах с разным расширением экрана текст переносился на следующую строку в тех местах где это действительно необходимо, а не там где были раннее расставлены пробелы и переносы строк. Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br>, но есть вариант куда проще.. Знакомимся тег <pre>, текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк Пример: <html> </pre> Такие вот дела.. Полезные советы: · Писать странички в блокноте конечно можно, но я Вам настоятельно рекомендую воспользоваться полноценным HTML редактором, благо их на рынке программного обеспечения великое множество. Я не буду давать их подробное описание, скажу лишь что они, как правило, несут в себе одинаковые стандартные наборы инструментов и отличаются друг от друга пожалуй только интерфейсом.. сравнивать их не берусь, так как они носят исключительно характер привычки пользования веб мастером тем или иным редактором html кода. Расскажу про основные плюсы использования подобного редактора. o Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное. o Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов. o Ну и "общие" удобства - сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит! P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём. · Немного об этике и здоровье глаз.. Если создаваемый Вами сайт его дизайн и назначение не требуют обратного, то советую избегать следующих вещей: Использовать яркие контрастные цвета фона и шрифта. Поверьте, когда у человека начинают слезиться глаза от чтения такой страницы, он резко теряет к ней интерес. Это же касается и размеров текста. Не стоит использовать огромные заголовки, впрочем, как и содержание малюсенькими буквами - это напрягает, ищите золотую середину..
Глава 3 Рисунки. В этой главе я расскажу о том как добавить на нашу страничку графические изображения фотографию например, или рисунок, а также о том, что можно с ними вытворять используя предложенный набор тегов html языка. Путь к файлу Итак, допустим Вы пишете сайт о себе любимом и хотите вставить в него свою фотографию, чтобы люди зашедшие на страничку смогли не только читать Ваши рукописи, но и вдоволь полюбоваться Вашим портретом. Есть у Вас значит фотография, которая где-то лежит на Вашем жёстком диске.. копируем ёе и вставляем в ту папку (директорию) где уже лежит заготовка будущей страницы, ну то есть туда же, куда сохраняете блокнотом html документ. Так, вот для того чтобы теперь вставить её в нашу страничку к ней нужно указать путь. делается это так: <img src="foto.jpg"> Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем. Да, помните, тег <img> не требует закрывающего тега! Теперь приведу ряд примеров где путь указывается: <img src="myfoto/foto.jpg"> - Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс Ну что, давайте попробуем выложить фото. Вот мой пример: <html> Как видно из этого примера фотография появилась, но вместе со своим появлением сдвинула текст, а не хотелось бы.. Атрибуты тега <img> Поговорим о расположении изображений относительно текста. Как и другие теги <img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align "выравнивание" применим и к данному тегу <img src="foto.jpg" align="left"> - фото слева от текста Помимо align тег <img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель (точка), наверное Вы не раз слышали это слово и думаю основная масса народа которая держала мышку в руках знает что это такое, но всё же.. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 - будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями.. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран. Теперь продолжим.. <img src="foto.jpg" vspace="15"> - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей А еще изображение можно сделать фоном страницы.. для этого используем атрибут background "фон" открывающего тега <body> Вот так: <body background="foto.jpg"> Выравнивание рисунка. Теперь расскажу о том как разместить нашу фотографию в нужном месте страницы. На самом деле об этом я уже рассказывал.. вспомните вторую главу, где говорилось о том как можно выровнять текст.. эти же теги применимы и к выравниванию изображения… так что, пожалуй, повторятся не буду, просто приведу пример, а Вы уж самими подумайте почему одно и тоже фото очутилось в том или ином месте.. Пример: <html> Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь! Итог главы: <html> Единственное, что Вам в этом примере не знакомо так это надпись - - это есть так называемый спецсимвол в данном случае - пробел.. о спецсимволах и их назначении я расскажу более подробно в 6 главе. Честно говоря, мне мой пример не сильно по вкусу, неряшливо как-то.. Но цель показать, что можно делать с изображениями думаю достигнута.. Полезные советы: · Используя графику, будьте осторожны.. не стоит размещать на своей странице большие весом мегабайтные изображения, пожалейте время и деньги посетителей страницы. Большой объём графики при низкой скорости интернета может привести к тому, что посетитель закроет Вашу страницу ещё до того момента как она загрузится. · Помните, что есть пользователи, которые умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на трафике, а по сему рекомендую соблюдать следующие советы: · Если рисунки выполняют роль кнопок (см. Глава 5), обязательно подписывайте их (атрибут alt) к примеру: "Перейти на главную страницу" или "Скачать" дабы человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице. · Используя картинку в качестве фона документа дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом (атрибут bgcolor тега <body>) вот так например: <body bgcolor="#008000" background="fon.jpg"> Это будет значить, что если к примеру не загрузится Ваша изысканная зелёная текстура, фон будет просто зелёным - что лучше, нежели чем белый цвет в общем дизайнерском решении сайта.
Глава 4 Таблицы Помимо прочих объектов в свой сайт Вы можете вставить таблицы.. и сразу забегая вперёд скажу о том что они имеют не малую значимость при создании сайта. С помощью таблицы можно не только выложить ту или иную информацию, тарифную сетку или график дежурств к примеру, но и взяв ёе за основу полностью построить на ней свой сайт, таблицы порой незаменимы при верстке страницы, но об этом позже. А сейчас давайте научимся её рисовать.. Рисуем таблицу Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега: <tr> - строка таблицы Вместе эти теги пишутся так: <table> Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который добавит нам наглядности. <html> Разобрались? Если да, идем дальше.. Объединение ячеек. Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну. На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть". Эту задачу решают атрибуты colspan и rowspan · colspan - определяет какое количество столбцов будет занимать данная ячейка · rowspan - количество рядов занимаемое ячейкой Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место. <html> Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия. Исправленный пример: <html> Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее. <html> Всё просто.. главное быть внимательным! Размеры таблицы. Если Вы самостоятельно тренировались с рисованием таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом.. и "ползают" себе как хотят. Вспомните про атрибуты width - ширина и height - высота, которые мы использовали для растягивания рисунков, они так же применимы к тегам <table>, <tr> и <td>. С этими атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center> Пример: <html> Обратите внимание на то, что длина и ширина заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым широким и длинным ячейкам.. на то она и таблица.. Еще не всё рассказал.. Значения атрибутов width и height в таблице могут указыва
|
|||||||||||||||||||||||||||||||||
|
|
Последнее изменение этой страницы: 2016-12-17; просмотров: 197; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.232.137 (0.013 с.) |
