Изграждане на собствен уебсайт за начинаещи: 5 стъпки

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

Независимо дали някога сте мечтали да бъдете компютърен програмист или някога сте използвали уебсайт, което нека си признаем, сме почти всички ние, информационните технологии се превърнаха в гръбнака на бизнеса. Въпреки че програмирането в началото може да изглежда малко страшно, целта ми е да ви науча на основните основи на уеб дизайна, така че след този урок да можете да направите своя собствена уеб страница. С това извън пътя, нека да стигнем до него!

Консумативи

• Компютър с Macintosh или Windows (въпреки че могат да се използват и дистрибуции на Linux, засега ги пропускам, тъй като това е въведение за начинаещи).
• Вашият избор на текстов редактор (Notepad в Windows, TextEdit в Mac) или вашият избор в IDE. От моя опит открих, че Visual Studio Code работи най -добре за мен, затова също бих препоръчал да го проверите тук: https://code.visualstudio.com/ да не говорим, че работи на всички платформи на ОС.

Стъпка 1: Етикети и малко история

След като сте решили да изберете текстов редактор или IDE, нека започнем с основите.

Вярвате или не, HTML или HyperText Markup Language съществува от близо 30 години и с всяка година идват все повече подобрения в езика. Сега може би се питате как браузърът интерпретира какво да постави на екрана? Това се прави на няколко части:

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

Ето някои от основните HTML тагове:

• заглавие - което се използва за съобщаване на браузъра какво е заглавието на страницата. Това е и това, което виждате, когато погледнете раздела на уеб страница.
• h1, h2, h3, h4 - които се използват за различни размери на заглавията, като h1 е най -големият, а h4 е най -малкият. Ще разкажа повече за това в следващия раздел.
• p - параграф, използван за писане на текстови параграфи. Като параграфи върху хартия.
• br - break, който вмъква прекъсване в съответствие с текста.
• а - използва се за създаване на връзки към други страници, като връзка, върху която може да се кликне.
• img - използва се за свързване на изображение с уеб страницата.
• ul, ol, li - неподредени списъци, подредени списъци и елементи от списъка.
• - използва се за правене на вградени коментари в кода, които няма да се виждат от крайния потребител.

И ето някои CSS тагове (визуални):

• цвят - използва се за присвояване на определен цвят на конкретен елемент или набор от уеб страницата.
• размер на шрифта-използва се за промяна на размера на шрифта на страницата.
• background-color-използва се за промяна на фона на определен елемент или на цялата страница.

Прикачих и малък лист с мами, който да ви помогне, ако се почувствате малко изгубени, но не се притеснявайте, ще се справите за нула време! В допълнение, www.w3schools.com също е фантастичен ресурс за всеки ваш въпрос по програмиране. Определено са ми спестили време или също.

По същество начина, по който браузърът чете файла, е лесен. Той върви ред по ред и обработва функция по функция. Символите се използват за деклариране на таг като напр

и се използват за затваряне на маркера като

. Това е важно, в противен случай браузърът не може да спре. Между между

и

тагове, е мястото, където въвеждате каквото искате!

Стъпка 2: Настройка на редактора

Сега, когато разгледахме малко основните елементи на HTML уебсайт, нека се потопим и опитаме сами. За тази следваща стъпка ще използвам Visual Studio Code за програмиране на уебсайта, но оформлението на кода ще бъде същото, ако ви е по -удобно само да използвате Notepad или TextEdit.

В рамките на Notepad:

• С Notepad програмата се стартира с празен файл, което улеснява стартирането. Това също ще ни позволи да прескочим няколко стъпки в сравнение с използването на VS Code. Нека започнем, като запазим файла в правилния формат.
• Щракнете върху Файл> Запазване
• Въведете име за вашия файл, последвано от.html и под Save as type изберете всички файлове. Щракнете върху запазване.

В рамките на VS кода:

• Най -добрият начин да се възползвате от всички функции на IDE е да започнете, като създадете файла и кажете на IDE какъв тип файл е. Това може да стане по следния начин:
• Щракнете върху Файл> Нов файл
• Отваря се празен файл

• След това ще искате да започнете, като запазите файла, макар и празен, тъй като това ще позволи на IDE да може да разбере какъв тип файл ще бъде крайният продукт. Когато записвате, не забравяйте да включите разширението.html в края на името на файла. Щракнете върху запазване.

Стъпка 3: Чертежи

След като успешно сте записали файла filename.html, нека започнем със създаването на рамката за нашата уеб страница. Запомнете отгоре кои ключови части на файла трябва да декларираме, преди да започнем да създаваме останалата част от HTML страницата. Професионален съвет: когато стартирате рамката за сайта, HTML маркерът! DOCTYPE казва на браузъра, че файлът, който чете, е html файл. Това може да бъде полезно, ако имате различни типове код в същия файл и искате да превключвате между интерпретатори. За обхвата на тази инструкция няма да се докосваме твърде много до това, но ако след тази инструкция сте любопитни да проверите повече за разработването на HTML, не се колебайте да я опитате. Ще вмъкна! DOCTYPE HTML маркера в горната част на файла за най -добри практики. Не забравяйте да отворите и затворите с.

Ето къде запазването на файла, преди да започнете програмирането, е полезно, след като IDE знае, че работи с HTML файл, ще използва intellisense, за да завърши израза и да предложи предложения, така че случайно да не забравите да затворите маркер. Обърнете внимание, че за тези от вас, които използват Notepad, intellisense не е наличен както в IDE. Започваме, като въвеждаме етикетите за главата и тялото, както следва: (вижте второто изображение).

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

Стъпка 4: Код; Код; Код;

Можем да започнем с вмъкване на заглавие за новосъздадения ни файл. Въведете каквото искате. Не забравяйте, че това е името, което се появява в раздела на браузъра. Нека започнем и с въвеждане на заглавие за нашия сайт. Спомнете си от преди това как правим това. Чух ли h1/2/3/4? Това е правилното!

Преди да продължим, намирам за полезно да отворим файла си в прозорец на браузъра, за да можем да видим в реално време как се отразяват промените ни в браузъра. Можете да направите това, като щракнете върху Файл> Запиши, за да запишете файла, отворете папката, в която е записан HTML файлът, за мен това е работният плот и използвайте браузъра по ваш избор, за да отворите файла и бихте ли го разгледали, там е вашата уеб страница! Забележка: Аз лично използвам Safari като браузър по избор на моя компютър, но в уеб разработката Firefox е златният стандартен браузър за тестване, тъй като работи с почти всеки език за скриптове в мрежата.

Както можете да видите, заглавието се показва в раздела, както и заглавието ни h1. Предпочитам прозорецът на браузъра на файла да се отвори заедно с IDE, тъй като когато правите промяна в IDE и записвате, промените са незабавни в браузъра.

Чувствайте се свободни да опитате да добавите тагове и да си поиграете с различните неща, които можете да правите с HTML. Както можете да видите по -долу, добавих няколко параграфа, паузи, външна хипервръзка към Instructables.com, изображение, (което може да бъде свързано от външен източник или в същата директория, където се съхранява. HTML файлът), пример за неподреден списък, подреден списък и накрая коментар.

Ако искате да опитате да добавите цвят и опции за подреждане, можете да въведете етикет за стил в главата на файла. Това е моментът, в който това се измества от HTML към CSS, но за визуална цел ще въведа няколко реда, за да видите как работи това. По същество как работи CSS, той ви позволява да контролирате HTML елементи в рамките на функциите, като използвате скоби {}, за да въведете кода си за конкретен HTML елемент.

Стъпка 5: Заключителни мисли

И ето го; успешно създадохте първата си уеб страница! Тъй като това е ръководство за начинаещи, искам да направя първото ви изживяване с HTML приятно. Най -добрият начин да се научите от моя опит е да се потопите и да изпробвате нещата, да видите какво можете да направите с кода си и също така да видите как можете да разбиете кода си. Това изгражда почтеност и ви помага да разберете по -добре как и защо кодът работи по начина, по който работи. Не забравяйте, че www. W3Schools.com е чудесен ресурс за въпроси и те дори предлагат виртуален пясъчник в браузъра, за да изпробват вашия код. Надяваме се, че сте научили нещо и щастливо кодиране!