Добавлен: 31.03.2023
Просмотров: 41
Скачиваний: 1
Тэг ALT рекомендуется, если ваши пользователи используют браузер, не поддерживающий графический режим, например Lynx.=n1:
Данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.=n2:
Параметр также необязателен, равно как и предыдущий. Дает возможность установить безусловную ширину рисунка в пикселях.: Этот параметр применяется, чтоб сообщить браузеру, куда разместить последующий блок текста. Это дает возможность более точно установить размещение элементов в экране. В случае если этот параметр никак не применяется, то большинство браузеров обладает отображение в левой части экрана, а документ с правой стороны с него.:
Этот параметр сообщает браузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML.
Приведем пример использования данного тэга:
<IMG SRC="http://www.softexpress.com/images/nekton.jpg"
ALT="СофтСервис лого" ALIGN="top" ISMAP>
С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:
<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle| bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4
HSPACE=n5 ISMAP>
Новые параметры::
Данный параметр позволяет автору определить ширину рамки вокруг рисунка.:
Позволяет определить объем в пикселях бессодержательного пространства над и под рисунком, для того чтобы документ не наезжал на изображение. Особенно это немаловажно с целью динамически создаваемых изображений, когда невозможно предварительно заметить документ.: То ведь наиболее, что и VSPACE, но только лишь по горизонтали. Фоновые картинки. Большинство браузеров дает возможность содержать в документ фоновый изображение, который будет матрицироваться и отображаться в фоне всего документа. Определенные пользователи предпочитают фоновую графику, не которые нет. Ненавязчивый полупрозрачный изображение (обои) как правило хорошо смотрится в свойстве фона для многих документов.
Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:
<BODY BACKGROUND="picture.gif">.
Задание стандартных цветов. Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок.
Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:
<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX"
LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры::
Цвет фона документа:
Цвет простого текста документа:
Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">
Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.
Горизонтальная линия. Используя тэг <HR>, вы можете разделить текст горизонтальной чертой.
Формат тэга:
<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center
NOSHADE>
Параметры тэга::
Толщина линии в пикселях.:
Ширина линии в пикселях либо процентах с ширины окна браузера.: Расположение в экране (по левую сторону | по центру | с правой стороны).: По умолчанию линия показана в 3D варианте с тенью. NOSHADE позволяет показать черту просто однотонной черной полоской.
Дополнение стилей в документ дает возможность применять разнообразные стили шрифтов с целью отделения текстовой данных в ваших документах. Вот небольшой перечень стилей, поддерживаемых большинством браузеров:(жирный)(наклонный)spaced (type writer - с использованием фиксирован-ных шрифтов)
Вы можете комбинировать различные виды стилей, например жирный и наклонный.
Таблица №1: Основные стили текста
|
Стиль |
Элемент или тэг |
Результат |
|
Bold |
<B> Этот текст жирный </B> |
Этот текст жирный |
|
Italic |
<I> Этот текст наклонный </I> |
Этот текст наклонный |
|
Mono spaced |
<TT> Этот текст с непроп. шрифтом </TT> |
Этот текст с непроп. шрифтом |
Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например: <b>Жизнь</b> - <i>это <b>песня!</b></i> Жизнь - это песня!
Внимание! Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!
Дополнительные стили:
· big (большой)
· small (маленький)
·sub (подстрочник) · sup (надстрочник)
Таблица №2: Дополнительные стили текста
|
Стиль |
Элемент или тэг |
Результат |
|
Big |
Этот текст <BIG> большой </BIG> |
Этот текст большой |
|
Small |
Этот текст <SMALL> маленький </SMALL> |
Этот текст маленький |
|
Sub |
Этот текст <SUB> подстрочник </SUB> |
Этот текст подстрочник |
|
Sup |
Этот текст <SUP> надстрочник </SUP> |
Этот текст надстрочник |
Размер шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга: <FONT SIZE=+|- n>
Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга: <BASEFONT SIZE=n>
Например: <p>и <font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>
Изменение цвета шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга: <FONT COLOR="#XXXXXX>
Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий "0000FF" и т.п.
<FONT COLOR="#FF0000"> Красный </FONT> <FONT
COLOR="#00FF00"> Зеленый </FONT> <FONT COLOR="#0000FF"> Синий.
2.4 Оптимизация графики для web
В этот период в Web применяется 2 типа растровых файлов: в форматах JPEG и GIF.формат хорошо представляет цветовые и тоновые раскаты, размытые границы (например, фотография). JPEG-файл хорошо масштабируется в браузере. Плохо представляет ровные плоскости цвета, в компрессии уступает GIFформату. При сохранении в JPEG ‑ формате подбирайте свойство "medium".формат хорошо передает прямые плоскости цвета, строгие границы (к примеру, векторную графику, логотипы). Обладает наибольшую компрессию, допускает бесцветный фон.
Слабо масштабируется в браузере, искривляет цветовые и тоновые раскаты. Используйте GIF ‑ формат, в случае если отображение без существенных потерь переводится в 128-цветовую палитру с включенной опцией "dithering". В ином случае правильнее сохранять изображение в JPEG ‑ формате. С целью вывоза файла в GIF‑ формат сначала проиндексируйте его цветную гамму в Adobe Photoshop:
Подбирайте наименьшее число расцветок ручным способом. ant. автоматический (для высококачественной передачиоднотонного изображения в гладком фоне достаточно 5-8 цветов, 2-ух трехцветного изображения – ПЯТНАДЦАТИ ДВАДЦАТЬ ПЯТЬ цветов) В случае если начальное отображение Grayscale, перед индексацией переведите его в RGB-палитру.
По возможности избегайте включения опции "dithering"- она увеличивает размер файла. Эта опция необходима, только если в изображении присутствует цветовой или тоновой раскат (напр. тень). Назначая прозрачный фон, после применения "dithering" убедитесь, что фон не стал "клетчатым".
В сложных случаях перед индексированием выделите наиболее важные элементы изображения.
Цвета внутри выделенной области индексируются корректнее остальных.
Глава 3. Алгоритм практической работы
3.1 Подготовка
Для создания web-сайта я использовал две программы:
Adobe Dreamweaver CC 2018 и Brackets.
Я создал не большой HTML в котором поместил все не обходимое для понятной разметки , в документе есть блоки и разметка помещённая в них , также в документе есть не сколько фотографий ссылки и иконки Соц сетей , есть кнопки анимированные также в работе есть документ Css который я не стал добавлять в саму работу так как речь идёт только Html . Это разметка моего сайта портфолио который сделан на 60% .
Я создавал непосредственно сам web-сайт. Для создания web-сайта я подготовил необходимую мне информацию, описал саму специальность, что мы должны уметь и что должны знать, добавил списки групп .
Заключение
В наше время существует множество программ для создания web-сайтов, но не одна из них не может сделать этого самостоятельно, обязательно нужен пользователь, который, будет управлять этой программой. И какой программой не пользуйся, без знания языка программирования HTML у пользователя ничего не получиться.
В процессе создания web-сайта я познакомился с методом программирования HTML, научился создавать web-страницы и использовать базовые теги. Работать с файлами разных форматов и расширений для корректного отображения в среде интернета.
Я хочу, чтобы мои знания пригодились мне в будущем на работе, мне конечно далеко до профессионала, но я буду и дальше изучать программирование на языке HTML и совершенствоваться как специалист.
Список использованной литературы
- Джон Дакетт Всеёчто нужно знать про HTML.
- Мальчук Е. - HTML и CSS. Самоучитель.
- Web-сайт - www.msiter.ru
- Web-сайт - www.ic.vrn.ru
- http://scriptic.narod.ru/html/
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт портфолио</title>
<!-- Старым версия интернет Эксплорер отображать нашу страницу как можно лучше -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Отображения страницы в масштабе 100% Изменения под телефон -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Стили из интернета подключены онлайн -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Подключён Css Файл -->
<link rel="stylesheet" href="Css/main.css">
<!-- Подключения стели шрифта от Gugol -->
<link href="https://fonts.googleapis.com/css?family=Merriweather|
PT+Sans+Caption:400,700" rel="stylesheet">
<!-- Шрифт Фантомом из Интернета -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/fontawesome.min.css" rel="stylesheet" >
<!-- Иконка сайта -->
<link rel="shortcut icon" type="image/x-icon" href="Imidg/iconca/Iconca.png">
</head>
<body>
<!-- ................... Голова сайта ВЕРХ ....................... -->
<div class="header">
<div class="header__titje">Шевель Михаил</div>
<div class="header__slogan">Верстка сайтов на HTML и Css<br>HTML5
Css3 JS iQuery</div>
<!-- Стрелка с сайта Фантомом СЫЛКА -->
<div class="header__arrow"><i class="fa fa-chevron-down" ariahidden="true"></i></div>
</div>
<!-- ..................... Тело сайта СЕРЕДИНА .........................-->
<div class="portfolio">
<div class="container">
<div class="tatle">
Портфолио
</div>
<!-- Работа с колонкой 1 -->
<div class="row">
<div class="col-4">
<div class="portfolio-item">
<div class="portfolio-item__img">
<img src="Imidg/portxolio/%D0%9A%D0%B0%D0%BA
%D1%82%D1%83%D1%81.jpg"
alt="Кактус">
</div>
<div class="portfolio-item__title">
<a href="work-organica.html">Мокет Органика</a>
</div>
<div class="portfolio-item__text">
<p>Верстка однострочного сайта по
PSD мокету.</p>
</div>
</div>
</div>
<!-- Окончили -->
<!-- Работа с колонкой 2 -->
<div class="col-4">
<div class="portfolio-item">
<div class="portfolio-item__img">
<img
src="Imidg/portxolio/%D0%94%D0%B5%D1%80%D0%B5%D0%B2%D0%BE.jpg
"
alt="Дерево">
</div>
<div class="portfolio-item__title">
<a href="work-appollo.html">Учебный мокет Аполо</a>
</div>
<div class="portfolio-item__text">
<p>Верстка лэндинга верстка компании Мобильная одоптивность .</p>
</div>
</div>
</div>
<!-- Окончили -->
<!-- Работа с колонкой 3 -->
<div class="col-4">
<div class="portfolio-item">
<div class="portfolio-item__img">
<img
src="Imidg/portxolio/%D0%A2%D0%B8%D1%85%D0%BD%D0%BE%D0%BB
%D0%BE%D0%B3%D0%B8%D0%B8.jpg"
alt="Технологии">
</div>
<div class="portfolio-item__title">