Урок 4 - Использование графики в HTML.

Создание собственного сайта от А до Я. Урок 4 - Использование графики в HTML.

Вставка изображения

Создание собственного сайта от А до Я.

Рассылка закрыта

Статистика

Отправляет email-рассылки с помощью сервиса Sendsay

При закрытии подписчики были переданы в рассылку "Cекреты успешных идей для интернет-бизнеса" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

← Ноябрь 2005 →
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15 15.11.2005 19:06:00 19:15:07	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Автор

Студия Мастера Монтажа

2.025 подписчиков
0 за неделю

← Все выпуски →

Информационный Канал Subscribe.Ru

Наконец-то появилось свободное время для подготовки 4 урока. Пригошу свои извинения за долгое отсутсвие.
1. - Радостное событие рассылка переведена в категорию "Серебряные рассылки Subscribe", сюда переводят только лучшие рассылки. Что не может не радовать.
2. - Число подписчиков теперь около 1200. Всем кто не ознакомился с предыдущими выпусками, для понимания уроков рекомендую ознакомиться с более ранними уроками. Архив уже вышедших уроков можно скачать тут
3. - Еще две работы слушателей рассылки добавлены в список - "Строим вместе".
Web Coder, именно на нее ориентируясь, будут написаны уроки. Поэтому все кто желает понять и свободно владеть HTML , качаем по этой ссылке (600 кб).
Ну, все приступаем.

В прошлом уроке забыл разместить вариант решения задачи (использование тэга FONT)

<font face="Courier" color="#008000">Я изучаю азы <font color="#ff0000" size="5">HTML</font>, в <font color="#800040" size="4">будущем я</font> буду <font face="Arial Black" color="#0000ff" size="4">свободно владеть</font> этим языком.</font>

Применение графики при написании web-страниц многогранно. Разобрать все нюансы в одном уроке просто не возможно. Моя же цель дать основы, уберечь от возможных ошибок при использовании графики. Остальные же нюансы будем разбирать по ходу выпусков, отвечая на ваши вопросы. Основы.
Во первых для полноценного использования графикой будут необходимы следующие программы:
1. - Adobe Photoshop CS = создание графики.
2. - Gif Constructor Set = создание анимации.
3. - Advanced JPEG Set = оптимизация графики.
Этими программами пользуюсь я, собственно можно использовать и труды других Авторов, благо в инете есть не мало материала. Но тут есть один минус, использованная вами графика, может еще встретиться еще на 100 других ресурсов, тут уж ни о какой оригинальности речи идти не может.
Вот требования к графическим файлам:
1. - наиболее часто используют форматы = jpeg, gif, png, bmp.
2. - размер картинки должен быть как можно меньшим. Причина банальна, у посетителя вашего ресурса есть много других занятий, а не только ждать по долгу полной загрузки страницы. То есть, перегрузив страницу, посетители буду уходить, так и не дождавшись окончательной загрузки.
3. - старайтесь делать так, чтобы страница смотрелась одинаково привлекательно как с графикой, так и при просмотре без графики. Около 40% Российских пользователей инета просматривают страницы, отключив прием графики.
4. - избегайте плагиата. Если вы взяли с какого-нибудь ресурса ту или иною картинку, не забудьте указать об этом на странице, на которой была использована эта картинка.

← Ноябрь 2005 →

15 15.11.2005 19:06:00 19:15:07

Например, нужно вставить изображение в определенный участок страницы.
пример1

Параметры тэга

src = путь к картинке. Может быть, как относительным, так и абсолютным.
alt = подпись к картинке. Отображается при отключенной графике
width = ширина картинки в пикселях.
height = высота картинки в пикселях.

В почтовых клиентах этот тэг отражается не корректно. Просмотреть и скачать этот урок можно по этой ссылке. Использование параметров width и height не является обязательным. Картинки, у которых прописаны параметры width и height, браузером загружаются быстрее. Вот небольшая хитрость: Эту полосу можно создать двумя путями:

№1

<img src="html_prosto.gif" alt="пример2" width="700" height="21">
файл картинки = *

* Ширина оригинального файла всего один пиксель.

№2
Использование графического файла такого же размера как и отображаемый 700 пикселей.
Вывод:Если использовать первый пример файл для отображения будет весить всего 4 кб. Во втором случае в раза 2-4 больше. Думаю вы поняли то что я вам хотел сказать.

Дополнительные параметры тэга

align = тэг указывает на отношение картинки к тексту. Виды:
1. - align="middle" - текст будет по середине картинки.
2. - align="left" - это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
3. - align="right" - наоборот.
4. - align="top" - текст вверху картинки.
border = толщина рамки вокруг изображения. Пример = border="7", рамка вокруг изображения будет толщиной 7 пикселей.

Кнопка вашего ресурса.
Вы спросите, а зачем это нужно? Отвечаю - это отличный способ привлечения дополнительных посетителей на ваш ресурс. То есть сайт партнер размещает вашу кнопку у себя на страницах, а вы взамен размещаете кнопку или ссылку этого ресурса. Пример создания кнопки для рассылки:

Если вы собираетесь обмениваться кнопками с другими ресурсами, путь к графическому файлу картинки должен быть абсолютным.
Вы можете поддержать рассылку размещением кода кнопки рассылки, у себя на ресурсе. Заранее благодарен.
Рекомендую обмениваться с ресурсами:
1. - сходной с вами тематики
2. - равной посещаемости.
Начать обмениваться можете с ресурсами, размещенными в разделе "Строим вместе". Так вы поможете друг другу по быстрее раскрутить ваши проекты. Конкурс!!!
Объявляю конкурс на лучшую созданную кнопку для своих ресурсов. Лучшая кнопка по итогам голосования, будет размещена на странице "Друзья Софт портала SMM" (за 24 часа в среднем посещают около 500 уникальных посетителей). Свои работы высылать мне на softsmm@mail.ru. Требования:
1. - оригинальность.
2. - размер 88*31 пиксель.
3. - не более 15 кб.
4. - формат Gif или Jpg.
Работы принимаются в течение этой недели (в теме письма укажите на конкурс HTML это просто). От одного Автора принимаются не более одной работы. Со следующей недели будет открыто голосование по полученным работам. Работа, которая получит больше всего голосов, будет признана лучшей.

В следующем уроке я научу строить таблицы в web-документах.

Письма читателей.

Пройден ПЕРВЫЙ урок. Спасибо! Здорово! Понравилось! Просто-Наглядно-Результативно! p.s. Где увидеть СЧЕТЧИК?
Прислала: Марина.

Вот код стандартного счетчика для narodных сайтов.
<BR><CENTER><IMG SRC=http://www.narod.ru/counter.xhtml></CENTER><BR>
Также рекомендую установить счетчики следующих систем подсчета статистики:
Система статистики Mail = сбор общей информации.
Система статистики Liveinternet = рекомендую выбрать счетчик - "статиситика за 24 часа.
Для получения счетчика, заходите по ссылкам, находите ссылку добавить ресурс, предварительно подготовьте следующую информацию: описание, ссылка, автор, ключевые слова. После успешной регистрации, вам будет выбрать подходящий дизайн и тип кнопки под ваш сайт. Полученный код разместите на каждой странице вашего ресурса. Избегайте использования более 4 счетчиков. Также рекомендую добавить свой ресурс в каталог Top.Rambler.

Привет. Вот то же решил создать свой сайт, только возникла проблема с прописанием ссылок если запускать сайт с моего компа, то ссылка на видео работает отлично если запускать с другого компа, то ничего не получается и еще один вопрос возник, я сделал бегущую строку, только вот как ее отформатировать: размер шрифта, цвет, СКОРОСТЬ, мерцаниеПрислал: МАКС

Вы указываете ссылку на файл на вашем локальном диске, а нужно на файл на сервере!!! На счет бегущей строки - просто отформатируйте текст внутри тэгов <marquee> </marquee>

Здравствуйте! По Вашему 1-2 уроку я написала приветствие и расставила тэги. Правильность проверила по кодеру. Потом на бесплатном хостинге www.narod.ru зарегестрировала домен и зайдя в мастерскую, залила в корневую папку этот пробный файл ( ну, конечно inbox.ru). Все получилось с первого раза лучшим образом. дальше... когда я исходный файл inbox ( в блакноте) расширила и сделала более подходящим по тексту и фону и попыталась залить вместо предыдущего, предварительно удалив из "Управление файлами" в мастерской, у меня ничего не вышло. То есть сам файл удалился и другой я загрузила, даже на просмотре в редакторе показывает новую страницу, а когда смотрю через интернет, войдя в браузере, я вижу старую страницу. Что я ни пыталась сделать, ничего не получается. Может быть в корневой папке так и будет торчать первый файл и его невозможно удалить. Тогда что можно сделать? и вообще как тогда обновлять первую страницу. Подскажите, как поменять файл в корневой папке, чтобы новый файл был виден в инете ( а не первый).Прислала: Раиса

Во первых = inbox.ru = что это за файл????. Страница должна быть с именем = index.html. Именнно эта страница будет загружатсься при первом обращении к вашему сайту. Файл index.html нужно загрузить именно в корневую папку, заменив тот который уже лежит в папке.

Свои вопросы, пожелания, замечания можете задать:

e-mail - softsmm@mail.ru.
оставив сообщение в - гостевой книге.
Полезный форум - раздел "HTML это просто".

Полезная рассылка

Обзор софта с прямыми ссылками; Hi-tech новости; Юмор и многое другое Вы можете получать каждую неделю.

Подписаться через:
Subscribe или Rambler

Создают с нами:
  http://yurasite.narod.ru

  http://brigadir25.narod.ru

  http://Mar280755.narod.ru

  http://inyi.narod.ru

В этой колонке, будут ссылки на ваши проекты. Которые создаете по моим урокам. Достаточно выслать на softsmm@mail.ru адрес вашего ресурса. Внимание!!! Принимаются только ресурсы, которые создаются по моими урокам, содержание, наполнение значение не имеет.

Вся информация по рассылке доступна здесь. Вы можете скачать все выпуски рассылки.

Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора

Подписан адрес:
Код этой рассылки: inet.webbuild.htmlsmm
Архив рассылки

Отписаться
Вспомнить пароль

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}