Шаблон целевой страницы и руководство

  • Автор темы EmilWilko
  • Обновлено
  • 18, May 2024
  • #1
Привет веб-разработчикам!

В рамках своей работы менеджером по работе с партнерами я решил создать простой шаблон целевой страницы и руководство по его редактированию.

Я считаю, что эта целевая страница поможет вам понять основы HTML и CSS, необходимые для создания адаптивной страницы, которая идеально работает на любом устройстве.

Несмотря на то, что руководство охватывает только HTML, вы можете довольно легко перепроектировать CSS. Вот руководство, общедоступное на Github:
https://github.com/ItsCanadaTime/Landing-Page-One

Не стесняйтесь комментировать вопросы здесь, и я сделаю все возможное, чтобы предоставить решение. п.с. *На этой странице нет партнерских ссылок.

EmilWilko


Рег
22 Mar, 2009

Тем
73

Постов
195

Баллов
610
  • 20, May 2024
  • #2
Огромное спасибо за подробный пост, просматриваю его уже третий раз и проверяю то, что вы указали!
Обновления скоро появятся на GitHub Я был бы рад, если бы вы добавили немного CSS, как вы и говорили, похоже, у вас много знаний и опыта, которых мне не хватает.
 

Text-support


Рег
12 Apr, 2012

Тем
70

Постов
182

Баллов
542
  • 21, May 2024
  • #3
Хорошо, давайте разберемся, как/что/почему в HTML. Следуйте вместе с:
http://www.cutcodedown.com/for_others/Pavel_Yudkevich/template.html.txt

хотя комментарии там объясняют большую часть этого, давайте просто рассмотрим эти комментарии. DOCTYPE до кодировки META: «Я предлагаю сжать DOCTYPE с помощью META-кодировки, а также и в отдельные строки как мягкое напоминание о том, что между ними ничего не следует вставлять, и они ДОЛЖНЫ появиться в этой последовательности." Это просто хорошая практика, чтобы не облажаться. МЕТА области просмотра: «Мета-экран области просмотра сообщает мобильному устройству, что мы знаем, что делаем, некоторые устройства Android также нуждаются в настройке высоты для альбомной ориентации». По умолчанию большинство мобильных устройств применяют дополнительное «масштабирование» к страницам и лгут о размерах своих устройств, предполагая, что веб-сайты не были созданы для мобильных устройств.

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

Вадим7771


Рег
25 Sep, 2013

Тем
64

Постов
208

Баллов
558
  • 10, Jun 2024
  • #4
Если вам «нужно» это сделать (тупая авария Пола Айриша, опубликованная в сети):

 
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
name="viewport"
content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1"
>
<meta
name="description"
content="Лучшая помощь в иммиграционной службе."
>
<meta
name="keywords"
content="иммиграция,услуги,помощь,Канада,эксперт"
>
<link
rel="stylesheet"
href="template/screen.css"
media="screen,projection,tv"
>
<title>Canadin immigration service</title>
</head><body>

<h1>Easy immigration to Canada!</h1>

<div id="content"><div class="widthWrapper">

<div class="subsection">
<p id="whatWeDo">
Our immigration service is one of the best in the industry helping thousands of people to immigrate to Canada every year with our advenced technologies, dedicated staff and world class experts.
</p>
<!-- .subsection --></div>

<a href="[URL='https://lumtu.com/yti/bwYYwb21odHRwczovL2l0c2NhbmFkYXRpbWUuWbp']https://www.itscanadatime.com[/URL]" class="continue">Continue</a>

<div id="footer">
<hr>
<img src="images/logo.svg" alt="Логотип ItCanadaTime">
<img src="images/rcic.png" alt="Логотип irccrc">
<img src="images/ssl.png" alt="логотип SSL-транзакции">
<hr>
<p>
&copy; thewebsitename 2018 All Rights Reserved.
</p><p>
<strong>This site is not in any way a part of nor is it endorsed by the <b>Facebook</b>&trade; website or <b>Facebook&trade; inc.</b></strong>
</p>
<!-- #footer --></div>

<!-- .widthWrapper, #content --></div>

</body></html>


Код (разметка): с вашим кодом что-то НЕПРАВИЛЬНО.

Если вам нужно сделать это на новом сайте:

  <div id="credentials"> <p id="copyright">Copyright ©thewebsitename 2018 All Rights Reserved. </p> <p id="disclaimer">THIS SITE IS NOT A PART OF THE FACEBOOK WEBSITE OR FACEBOOK INC. ADDITIONALLY, THIS SITE IS NOT ENDORSED BY FACEBOOK IN ANY WAY. FACEBOOK IS A TRADEMARK OF FACEBOOK, INC</p> </div> 


Код (разметка): с вашим кодом что-то НЕПРАВИЛЬНО.

Эта мета:

  <div id="footer"> <img class="logo" src="Image/logo.svg" alt="Логотип ItCanadaTime"> <img class="logo" src="Image/rcic.png" alt="Логотип irccrc"> <img class="logo" src="Image/ssl.png" alt="логотип SSL-транзакции"> </div> 


Код (разметка): не служит НИКАКОЙ законной цели и не имеет НИЧЕГО общего с SEO.

Ни один UA ничего с этим не делает.

Хотя в этой части кода вы можете добавить комментарий к ключевым словам, в котором говорится, что это должно быть «семь или восемь ОДНЫХ слов (или имен собственных), которые существуют между и . Вы помещаете НИЧЕГО еще в там - несмотря на то, что люди десятилетиями копались в этом поле с тарабарщиной - и это будет игнорироваться.

Это называется ключевыми СЛОВАМИ, а не ключевыми фразами, не ключевыми предложениями, не путаницей ключевых слов, а ключевыми.СЛОВА.

  <a href="[URL='https://lumtu.com/yti/bwYYwb21odHRwczovL2l0c2NhbmFkYXRpbWUuWbp']https://www.itscanadatime.com[/URL]" id="button"><span>Continue</span></a> 


Код (разметка): Сейчас 2018 год, вам не нужно указывать type="text/css" в ссылке на таблицу стилей (не то чтобы она КОГДА-ЛИБО на самом деле что-то делала), то же самое для type="text/JavaScript" в
 

Salbar


Рег
02 May, 2012

Тем
68

Постов
186

Баллов
556
  • 12, Jun 2024
  • #5
Извините за задержку, задержался на праздничных выходных. Просто пристегнулся. Раньше я постоянно переписывал подобные вещи, но в последнее время мне не хватало мотивации. Полная перезапись здесь:
http://www.cutcodedown.com/for_others/Pavel_Yudkevich/

Он все еще нуждается в некоторой доработке, но должен дать вам общее представление о том, куда с ним двигаться.

Некоторые изображения были переработаны для оптимизации размера файла.

Я бы предложил меньший/более простой фон тела, поскольку при мегабайте он «непригоден для веб-развертывания» на такой простой странице.

Я использовал фоновый размер: обложку, поскольку, если вы собираетесь использовать такое массивное изображение, было бы неплохо показать его все, а не только крошечный фрагмент. Когда я делаю такие переписывания, я обычно сопровождаю их разделами с разбивкой того, как/что/почему я делаю выбор.

Дайте мне немного времени, и я тоже выложу их здесь.
 

GrongeGef


Рег
03 May, 2012

Тем
77

Постов
187

Баллов
582
Тем
403,760
Комментарии
400,028
Опыт
2,418,908

Интересно