Уеб страница Bare Bones: 10 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:53

Днес ще създадем много проста уеб страница с голи кости от нулата. Ще говорим за HTML елементи, оформяне на вашата уеб страница (цветове, шрифтове, подравняване и т.н.) и накрая как да вмъкнете изображение във вашата уеб страница!

До края на тази инструкция ще имате основните умения за създаване на уеб страница от нулата и ще откриете, че кодирането не е толкова трудно, колкото изглежда!

Стъпка 1: Използване на Notepad

Ще използваме Notepad на windows, за да създадем първата си уеб страница. Въпреки че всеки текстов редактор ще го направи, бележникът е предварително инсталиран на машини с Windows, така че е чудесна отправна точка.

За да отворите бележника, отидете в лентата за търсене в долния ляв ъгъл на екрана и въведете „Notepad“. След това изберете приложението „Бележник“, което се появява в резултатите от търсенето. Трябва да се отвори нов прозорец.

Стъпка 2: Добавяне на базово дърво с документи HTML

Всички уеб страници трябва да следват стандартна скелетна структура, за да може вашият уеб браузър (Chrome, Firefox, Edge, Internet Explorer, Safari …) да обработва и показва вашата уеб страница.

Това се нарича html дърво дърво. В Notepad въведете html „elements“или „tags“, както е показано на снимката на екрана. Чувствайте се свободни да копирате и поставяте също:

Стъпка 3: Запазване като.html страница

Сега, когато имаме нашата основна html структура в Notepad, нека я запишем, за да не загубим никаква работа и за да можем да видим промените си, докато напредваме по Instructable.

1. Изберете „File“> „Save as…“(Екранна снимка 1)
2. Променете типа на файла на „Всички файлове“(Екранна снимка 2)
3. Дайте на файла си име по ваш избор. Не забравяйте да отбележите къде записвате документа на компютъра си, за да можете да го отворите по -късно. БЕЛЕЖКА: Най -важната част от запазването на този файл е добавянето на ".html" в края на името на файла. Това ще позволи на компютъра ви да го разпознае като уеб страница. Така че, ако искате да кръстите файла си „my_webpage“, не забравяйте да добавите.html в края на това, напр. "my_webpage.html"

Стъпка 4: Добавяне на заглавие към вашата уеб страница

Така че имаме основната html структура, необходима на уеб браузърите за интерпретация и показване на нашата уеб страница, но нямаме никакво съдържание. Нека променим това!

Първото нещо, което трябва да направим, е да дадем заглавие на нашата уеб страница. Почти всички уеб страници имат заглавие. Това се показва в раздела във вашия уеб браузър (вижте снимката на екрана). Ще дам на уеб страницата си заглавието „Уебсайт на Тейлър“. За да направим това, трябва да добавим елемент „заглавие“.

Уебсайт на Тейлър

В този момент ще забележите, че всеки маркер има „отварящ“таг и „затварящ“таг. Като

и.

Това е, за да се разбере къде започва заглавието и къде свършва. Почти всички html тагове следват това, но има някои изключения.

Стъпка 5: Добавяне на съдържание към вашата уеб страница

Е, имаме заглавие за нашата уеб страница, но все още нямаме действително съдържание за нея. Нека добавим малко усет!

Добавихме заглавие към нашата уеб страница, използвайки елемент „заглавие“. Нека да дадем на нашата уеб страница голяма, задържаща вниманието заглавка, като използваме елемент „h1“, който е заглавен елемент.

Уебсайт на Тейлър

Добре дошли на моята уеб страница

Стъпка 6: Преглед на нашите промени досега

Имаме заглавие, имаме малко съдържание, нека разгледаме нашата уеб страница как върви досега.

1. Запазете файла си в бележника
2. Отидете там, където сте записали файла си, и щракнете двукратно върху него. Той трябва автоматично да се отвори във вашия уеб браузър по подразбиране. Изглежда добре!

Стъпка 7: Добавяне на етикет на абзац

Имаме заглавие, заглавие, сега нека добавим абзац с още малко текст. Името на елемента за параграф е 'p'. Можете да видите използването му по -долу:

Уебсайт на Тейлър

Добре дошли на моята уеб страница

Днес ще научим как да създадем тази много проста уеб страница!

Забележка: Можете да видите промените си по всяко време, като запазите бележника и отворите файла.

Стъпка 8: Придайте му цвят

Уебсайтът ни се върти точно напред, но е доста ясен. Нека придадем на нашия етикет на абзац някакъв цвят!

Можем да оцветим различни елементи, като добавим атрибут „style“към маркера „p“, както е описано по -долу:

Уебсайт на Тейлър

Добре дошли на моята уеб страница

Днес ще научим как да създадем тази много проста уеб страница!

Стъпка 9: Добавяне на картина

Какво е уебсайт без снимки? Нека добавим снимка към нашия уебсайт!

Първата стъпка е да намерите изображение, което ви харесва. Използвах изображения на Google, за да търся златен ретривър. Издърпайте изображението нагоре и се уверете, че URL адресът завършва на.jpg,.png,.gif,-j.webp

След като сте избрали вашето изображение, трябва да го добавим към html страницата, използвайки маркер „img“. Моето изображение е:

Добавете го към страницата си, като използвате маркер „img“с атрибут „src“:

Уебсайт на Тейлър

Добре дошли на моята уеб страница

Днес ще научим как да създадем тази много проста уеб страница!

Стъпка 10: Преглед на крайния продукт

Запазете файла на бележника и отворете крайния продукт. Трябва да видите вашата уеб страница!