Jump to content
  • 0

для совсем чайников

Petr

Asked by Petr,

 Share

Question

Petr Explorer

Petr

Posted
Posted

Добрый день!

Начал самостоятельное изучение html и css. Есть пока пара совсем глупых общих вопросов, о которых в учебниках ответа нет. Поэтому обращаюсь к сведущим в данном вопросе людям.

1. Как редактировать html-код страницы? Я всё время сохраняю код в 2х разрешениях - .txt и .html. Можно ли сохранять только в .html и как потом дополнять/редактировать? (у меня MacOs, браузер Safari)

2. Когда использую css, то изначально всё отображается правильно. Но после внесения изменений/дополнений в файл .css внесённые изменения уже не отображаются при просмотре в .html. Как правильно вносить изменения в .css, чтобы они отображались?

Спасибо за любые пояснения.

Link to comment
Share on other sites

26 answers to this question

Recommended Posts

  • 0
Arinden Explorer

Arinden

Posted
Posted (edited)

Если не использовать сторонних программ: создаём файл index.html и style.css, никакие .txt вам не нужны. Редактировать можете в любом текстовом редакторе, открыв данный файл и сохранив его после изменений.

css стиль может быть внутри .html, а может быть отдельным файлом. В случае если style.css идёт отдельным файлом - прописываем в index.html между <head> и </head> 


<link href="style.css" rel="stylesheet" type="text/css" />

чтобы указать на месторасположение стилей. Если же стили прописываете в самом .html (в таком случае файл style.css вам не нужен), то тогда в томже index.html между <head> и </head> пишем:


<style type="text/css">
    <!--
    body {
        background-color: #000;
    }
    -->
</style>

в данном примере body присвоен чёрный цвет фона.

Также для редактирование файлов .html .css .php .js и др. удобно использовать специальный редактор, например Dreamwever от Adobe. Под Mac OS он есть.

Не забывайте сохранять файлы в необходимой вам кодировке. Например UTF-8 или windows-1251. Также учитывайте, что если вы собираетесь использовать php код, то файл index.html следует назвать index.php, иначе php не будет исполняться на сервере.

Названия файлов могут быть любые, но файл с названием index. открывается на сервере первым, так например, если у вас есть домен www.домен.ru и на хостинге лежат три файла index.html contact.php и galereya.html, то в случае если я перейду по вышеуказанной ссылке на ваш сайт, я увижу именно index.html.

Edited by Arinden
Link to comment
Share on other sites
  • 0
Petr Explorer

Petr

Posted
  • Author
Posted

Arinden, спасибо за ответ!

Проблема в том, что когда открываю html в программе txt, он мне в окошке текстового файла показывает мою web-страницу. С чем это может быть связано? лучше тогда использовать не txt, а dreamwever?

Если css идёт отдельным файлом и в html у меня на него ссылка, то при внесении изменений в css они должны автоматически появляться при открытии html?

Link to comment
Share on other sites
  • 0
Arinden Explorer

Arinden

Posted
Posted (edited)

Попробуйте MacPad++. Это аналог удобного, простого и лёгкого редактора NotePad++, только для Mac OS.

Да, каждый раз при открытии .html файла или обновлении страницы в браузере (F5), данные из файла .css запрашиваются по новой, как следствие внесённые изменения - применяются.

Edited by Arinden
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
<style type="text/css">

<!--

body {

background-color: #000;

}

-->

</style>

Насколько я в курсе, это оборачивание стилей и скриптов в комменты (для скрытия от браузеров древнее IE3/NС3, не знавших CSS) уже лет 10–12 как неактуально. И даже вредно, т.к. HTML-комменты — никак не то, что приличные браузеры ждут от контента, помеченного как "text/css". При XHTML-парсинге браузеры такие стили вообще игнорируют как любой "закомментаренный" мусор...

Link to comment
Share on other sites
  • 0
Arinden Explorer

Arinden

Posted
Posted

Насколько я в курсе, это оборачивание стилей и скриптов в комменты (для скрытия от браузеров древнее IE3/NС3, не знавших CSS) уже лет 10–12 как неактуально. И даже вредно, т.к. HTML-комменты — никак не то, что приличные браузеры ждут от контента, помеченного как "text/css". При XHTML-парсинге браузеры такие стили вообще игнорируют как любой "закомментаренный" мусор...

Не знал, что это может иметь отрицательные стороны, спасибо. Просто на xHTML делал именно так, w3 не указывает, что это непредпочтительный вариант, а dreamweaver даже ставит коммент за вас. Буду обращать на это внимание в будущем.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
w3 не указывает, что это непредпочтительный вариант

Формально это никаких правил не нарушает. Просто валидаторы — достаточно тупые программы, и, как хорошо заметил когда-то создатель AdBlock-а для FF,

Они не знают, что вы имели в виду, когда вы писали этот код. Они видят комментарий и считают, что все в порядке. Откуда им знать, что вы хотели, чтобы код внутри этого комментария выполнялся?
:)
на xHTML делал именно так

Когда на заборе (или в доктайпе) написано "X-что-то-там" — это еще не значит, что за забором (в браузере) будет именно это "X", пардон за каламбур :). При Content-type: text/html любой контент для браузеров превращается в обычный HTML — будь он хоть трижды веллформным по XML, валидным по DTD и конформным по содержанию. Кстати, легендарная HTML-совместимость в XHTML 1.0 по факту держалась на честном слове и на том, что все браузеры плохо поддерживали SGML (а значит, и HTML4.x!) :)

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Мета ни при чем, она может влиять только на кодировку (и то если перед ней <title> не затесался). На режим парсинга влияет только серверный заголовок ответа (определяется настройками сервера, в PHP можно явно добавить с помощьью ф-ции header, в др. серверных языках есть свои аналоги), еще до отправки разметки браузеру. При открытии файла локально играет роль расширение (.xhtml обычно открывается по XML-правилам).

Но в 99% случаев это не нужно, т.к. IE8 и ниже полноценного XHTML не понимают, совсем. Приходится либо выдавать разный Content-type в зависимости от заголовков запроса (в первую очередь Accept) и гарантировать, чтобы код был валиден как XHTML и хотя бы приемлем как HTML (впридачу к валидатору самому следить за соблюдением "приложения C", чтобы не было никаких <div /> и т.п.), либо вовсе отказываться от XHTML. Всё равно самые "вкусные" его преимущества не оправдались, а самые значимые понемногу влились и в HTML5...

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Формально по спеке это допустимо (хотя и не сильно желательно, только на правах вынужденного разумного компромисса). Практически вопрос скорее такой: "Нужен ли index'у.html доктайп <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0... и далее по тексту?" — и он, как правило, риторический :)

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Очень рекомендую вот этот цикл статей (несмотря на их приличный возраст, почти всё актуально, с этой статьей для полноты картины).

И еще у Transitional-доктайпов при text/html есть подводный камень — они включают в браузерах "почти стандартный" режим (вместо стандартного), что, в частности, чревато глюками с inline-block в Опере.

Link to comment
Share on other sites
  • 0
Arinden Explorer

Arinden

Posted
Posted

Спасибо, почитаю. Я вот сейчас глянул разные источники и пришёл к тому, что если я указываю в доктайпе xHTML, сохраняю файл как index.html, то в конечном итоге все браузеры видят мой файл как обычный 4.01 html и делай парсинг, как еслибы это был обычный html? Валидатор будет ко мне снисходителем и проверит всё одобрит и не указывая что я не был прав прописывая xHTML и не указывая application/xhtml+xml в дальнейшем. При этом если я укажу application/xhtml+xml, то у меня будут большие проблемы с ИЕ. Тоесть по факту мой xHTML выезжает только за счёт того, что браузеры думают что это у меня такой html 4.01, просто с ошибками и показывают как надо?

Link to comment
Share on other sites
  • 0
Arinden Explorer

Arinden

Posted
Posted

Ясно... Это грустно на самом деле. А куда прописывать надо application/xhtml+xml ? Я в meta прописал, в IE всё как было, так и есть. Просто тут подумал что можно сделать через php, в случае, если IE то менять тип контента.

P.S. ещё такой не до конца понятный для меня момент, если я использую в коде php, то у меня расширение обязательно должно быть .php? А как это .php с доктайпов xHTML-а? Просто если я делаю расширение .html, то php перестаёт работать, но это пока что локально, на хостинг не заливал пока.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Расширение важно только при открытии файла локально, на хостинге всё определяется настройками сервера. В PHP можно выдавать любой Content-type из самого скрипта, при любом расширении, с которым php на данном сервере вообще работает (вот пара примеров кода).

Только надо ли это всё на самом деле, если использование главных преимуществ XHTML (интеграция с др. неймспейсами и т.п.), насколько я понимаю, не планируется?

Link to comment
Share on other sites
  • 0
Arinden Explorer

Arinden

Posted
Posted

Я питаю иллюзии по поводу того, что xHTML это более серьёзный и порядочный метод представления сайта. Потом xHTML вроде как вышел, смотря в будущее, якобы HTML сойдёт на нет. Но вот, что меня сбило с пути, это выход HTML 5 и отказ от xHTML 2.0. Теперь я на распутье. Вроде как сделаю xHTML 1.0 всё будет работать и прекрасно себя чувствовать. С другой стороны раз развитие пошло в продолжение HTML 4.01, то почему бы и мне не прислушаться к этому, но и тут загвоздка: HTML 5 ведь ещё до конца не одобрен. Окончательная тестовая стадия так сказать. Да и ведь новые функции всё равно не стоит использовать, учитывая что много людей используют древние, необновленные браузеры...

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

HTML5 — это продолжение и расширение как HTML4.01, так и XHTML1.x. Собственно, они и раньше различались по сути только синтаксисом, а в HTML5 "синтаксис — ничто, семантика — всё", и их пути снова сошлись. При text/html равно правильны оба синтаксиса. И application/xhtml+xml в HTML5 сохранен (причем доктайп там вообще не нужен!). Больше того, новые браузеры (Хром 7+, FF4+, вот-вот выходящая Опера 12) вообще не знают никакого другого HTML, кроме HTML5 (без разницы, что там где в доктайпе написано). Так что, независимо от формального утверждения стандарта академической тусовкой, индустрия в целом выбор сделала.

Единственная проблема — валидация. Небольшие "косметические" изменения в спеке еще бывают, допустимые значения атрибутов добавляют/удаляют (теги — имхо, уже вряд ли), поэтому вчера валидная страница может завтра стать вдруг чуть-чуть невалидной. Но это касается новых экспериментальных вещей, то, что уже работает в >2 браузерах, работать вряд ли перестанет.

А вообще новый стандарт специально построен так, что валидная страница XHTML 1.0 Strict, скорее всего, также будет валидной HTML5-страницей (с точностью до доктайпа и пары-тройки атрибутов). Только с HTML5 можно не бояться, что валидация идет по одним правилам, а реальный разбор в браузерах — по совсем другим.

  • Like 1
Link to comment
Share on other sites
  • 0
Arinden Explorer

Arinden

Posted
Posted (edited)

Если я правильно понял, то новшества от HTML не применять вообще, потому что старыми браузерами они просто не поддерживаются? Как следствие, даже такие вещи, как 


<header></header>  
<nav></nav>  
<section></section>  
<aside></aside>  
<footer></footer>

мне просто не стоит применять, потому что в конечном счёте так как я хочу сайт увидят очень и очень не многие?

В видео ролике парень вот говорит что type="" теперь не нужен, а вот w3school в разделе HTML5 пишет что при подключении CSS мы указываем type="text/css", а при использовании script они также указывают тип скрипта...

Edited by Arinden
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Зависит от специфики проекта. Главных проблем с новыми структурным тегами две — старые браузеры воспринимают их как аналог <span>, а IE ниже 9-го стилизует только после применения JS-костыля. Поэтому для информационных сайтов, рассчитанных на максимальную доступность — пожалуй, и вправду лучше не надо. А если функциональность сайта так или иначе всё равно завязана на JS — то почему бы и не применить. И всегда есть временный компромисс, предложенный Майком Робинсоном — использовать новые теги чисто для логического деления документа (как в старину комменты а-ля <!-- Here goes the footer --> и т.п.), а визуальный каркас строить по-старинке на дивах. Кстати, с мобильными браузерами парадоксально проблем меньше (сейчас там преобладают браузеры на новых движках).

А type для скриптов и стилей просто не обязателен (отсутствие равносильно дефолтным значениям "text/javascript" и "text/css" соотв-но). На мой взгляд, если без чего-то можно обойтись без вреда для дела — лучше обойтись, но если кто-то привык всегда указывать "ради порядка" — это тоже правильно. Новый стандарт стремится фокусироваться на логической структуре, а не нюансах оформления кода.

Link to comment
Share on other sites
  • 0
Nekromancer Explorer

Nekromancer

Posted
Posted

Убедили, пишу под HTML 5. :)

Разве в этом нужно убеждать, разве подпись пред идущего оратора не говорит за себя? Как уже сказали, вы уже пишете на HTML5 хотите вы этого или нет и вам придётся на нём писать. Ну или пересесть на XML :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept