Лабораторные работы МИРЭА JavaScript (1017114), страница 3
Текст из файла (страница 3)
left — выравнивание таблицы по левому краю;
right — выравнивание таблицы по правому краю.
По умолчанию, выравнивание происходит по левому краю. Пример:
<table border="1" cellpadding="10" align="right">
<tr>
<td>Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
Для того, чтобы выровнять текст в таблице (и другое её содержимое), нужно использовать атрибут align для каждой конкретной ячейки! Т.к. именно в ячейках располагается всё содержимое таблицы. Пример:
<table border="1" cellpadding="10" align="center">
<tr>
<td align="right">Первая ячейка</td><td align="center">Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td align="right">Шестая ячейка</td>
</tr>
</table>
Для вертикального выравнивания содержимого ячеек предназначен атрибут valign, у которого есть следующие значения:
baseline — выравнивание по базовой линии;
bottom — выравнивание по нижнему краю;
middle — выравнивание по середине (значение по умолчанию);
top — выравнивание по верхнему краю.
Пример:
<table border="1" cellpadding="10">
<tr>
<td valign="top">Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td>Пятая ячейка</td><td valign="bottom">Шестая ячейка</td>
</tr>
</table>
В HTML цвет фона таблицы или отдельных её ячеек устанавливается с помощью атрибута bgcolor. О том, как в HTML выбрать нужный цвет того или иного элемента мы говорили в уроке про атрибуты тега body. Пример:
<table border="1" cellpadding="10" bgcolor="#999999">
<tr>
<td>Первая ячейка</td><td>Вторая ячейка</td><td>Третья ячейка</td>
</tr>
<tr>
<td>Четвертая ячейка</td><td bgcolor="#FF0000">Пятая ячейка</td><td>Шестая ячейка</td>
</tr>
</table>
В качестве фона таблицы или отдельной ячейки можно использовать картинки. В HTML это делается при помощи атрибута «background». Значением атрибута «background» является адрес до изображения (как в HTML вставляется графика мы изучали в этом уроке). Пример картинки-фона для всей таблицы:
<table border="1" cellpadding="10" background="fon.jpg">
<tr>
<td>Первая ячейка</td><td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td><td>Четвёртая ячейка</td>
</tr>
</table>
В HTML таблицы используются, главным образом, для разметки страниц. В этом их основное предназначение. В каждую ячейку таблицы можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому они так удобны для разметки html-страниц и разбивки их на отдельные блоки.
2.Задание
1. В текстовом редакторе набрать следующий код Web-страницы и сохранить его как текст в файле Фамилия.html.
<html>
<head>
<title> Добро пожаловать в Web – страницу
</title>
</head>
<bodyallign = center alink = tomato link = FFFF00>
Здесь содержимое страницы
</body>
</html>
Посмотреть этот файл в браузере.
Находясь в браузере, посмотреть исходный текст.
2. Для Web-страницы Фамилия.html задать атрибуты тэга <body>, описанные в теоретической части, и выяснить какие из них поддерживаются браузером Internet Explorer.
3. Для Web-страницы Фамилия.html изменить цвет фона, используя константы, описанные в теоретической части, а также задать фон в в виде картинки из файла.
4. С помощью графического редактора создать изображение и вставить его в Web-страницу, используя тэг <img> и указав в атрибуте <src> этого тэга полный путь файла, содержащего созданное изображение. В эту же страницу вставить заголовки всех шести уровней и использовать тэг <br> для размещения текста и изображения на экране. Вставить также текст с несколькими параграфами (абзацами), выделяя каждые параграф тэгами <p> и </p>. Вставить гиперссылку с помощью тэгов <a> и </a>:
<a href = “http.//www.microsoft.com” Microsoft </a>.
Вставить также форматированный текст, используя тэги <pre> и </pre>.
5. Изучить назначение атрибутов тэга <a>: accesskey, class, datafld, datasrc, href, id, lang, langvage, methods, name, rel, rev, style, taget, title, vrn, событие=сценарий, onclick, onmouseout, onmousover.
6. Разместить на Web-странице несколько фрагментов текста и несколько изображений, располагая их последовательно или мозаикой и изменяя атрибуты тэга <font>: class, color, face, id, lang, language, size, style, title, событие = сценарий, point_size, weight. Убедиться, что действие тэга
<font> прекращаются тэгом </font>.
Ввести фрагмент HTML и посмотреть на экране вид таблицы:
<table order>
<tr align = center>
<th colspan = 3> Это таблица </th>
</tr>
<tr allign = center>
<th> Это </th>
<th> ячейки </th>
<th> для </th>
</tr>
<tr allign = center>
<th> данных </th>
<th> в </th>
8. Создать таблицу, в которой будут использованы все виды списков.
9. Создать статическую Web–страницу по заданной тематике, полученной у преподавателя, разместив на ней все изученные элементы, в том числе все виды списков. Перед каждым новым элементом вставить необходимые пояснения. Проверить работу электронной почты и все виды гиперссылок.
10. Оформить отчет. В отчет должны войти коды и скриншоты по каждому пункту задания.
Теоретические материалы для лабораторной работы взяты с web-сайта http://www.seoded.ru/, точнее со страницы http://www.seoded.ru/beginner/soderg.html
Лабораторная работа №2
Основы javaScript
Цель работы: Изучение основ языка JavaScript
Краткие теоретические сведения.
Язык JavaScript предназначен для написания сценариев для активных HTML-страниц. JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.
Тег <script>
Сценарий JavaScript встраивается в HTML-документ с помощью тега <script>.
Пример
<head>
</head>
<body>
<h1>Это мой первый скрипт</h1>
<script type="text/javascript">
<!--
document.write("Привет!");
//-->
</script>
</body>
</html>
Написание комментариев
Комментарии могут находиться в любом месте программы и никак не влияют на ее выполнение. Интерпретатор JavaScript попросту игнорирует их.
Однострочные комментарии начинаются с двойного слэша //
<script>
alert('Мир'); // Второе сообщение выводим отдельно
</script>
Многострочные комментарии начинаются слешем-звездочкой "/*" и заканчиваются звездочкой-слэшем "*/". Вложенные комментарии не поддерживаются!
Скрипты могут располагаться как в области заголовка HTML, так и в области тела HTML.
Пример документа HTML и места скрипта в теле документа:
<html>
<head>
<!-- область заголовка HTML - это комментарий HTML -->
</head>
<body>
<!-- область тела документа HTML -->
<script>
//пример встраивания javascript в тело документа
/*использован метод Writeдля вывода на страницу результата выполнения функции Date() – возвращение текущего даты/времени
*/
document.write(Date());
</script>
</body>
</html>
Пример кода в составе страницы HTML:
<html>
<body>
<p>
JavaScript может написать прямо в теле документа
</p>
<script>
document.write("<h1>Это тег для заголовка</h1>");
document.write("<p>Это тег для обозначения параграфа</p>");
</script>
<p>
Вы можете использовать метод <strong> document.write </strong> в теле выходном
HTML.
Если вы используете этот метод после загрузки документа (например, в функции), весь документ будет перезаписан.
<!--тег <strong> делает выделения текста на выходе страницы -->
</p>
</body>
</html>
Текст сценария оформляется как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа "/", т.к. некоторые браузеры рассматривает строку, состоящую только из символов "-->", как ошибочную.
Объект document– это HTML-документ, загруженный в окно браузера. Метод write записывает в тело HTML-документа строку "Привет!". При этом документ будет выгдядеть так, как будто эта строка находится в нем на месте сценария.
Имейте в виду, что JavaScript, в отличие от HTML, различает строчные и прописные буквы. Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон объекта в HTML-документе задается через свойство background-color, то в JavaScript - через backgroundColor.
Переменные в JavaScript
Имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript. Все переменные в JavaScript объявляются с помощью ключевого слова var. При объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое-либо значение. Числа в строки интерпретатор JavaScript преобразует автоматически. Для преобразования строк в числа используют специальные функции parseInt и parseFloat.
Пример
<html>
<head>
</head>
<body>
<h1>Пример преобразования типов</h1>
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
