Loading...
Dominik avatar Dominik 82 Точки

[Homework] Web Fundamentals - HTML основи - September 2014

Homework HTML-CSS Basics

Това е 1-вото домашно от курса HTML-CSS September.

Предполагам има забележки така, че ще се радвам за съвети/препоръки от ваша страна :).

Mod edit: Моля използвайте коректните имена на курсовете, за да не се получават обърквания.

Тагове:
2
Web Fundamentals - HTML5 26/09/2014 23:24:02
micro3x avatar micro3x 135 Точки

В задача 3 не си направил правописната грешка в заглавието!!! wink

На картинката пише "Welcomer" а при теб е "Welcome".

Хехехе... А сега сериозно... идеално ти е домашното!

Само пак на същата задача е хубаво да правиш indent на нестнатите тагове. Така се чете по лесно. 

(Туй е от мен като съвет)

 

0
fissikela avatar fissikela 0 Точки

Къде е видеото от първата лекция.Кога е излязло това домашно при положение че няма видео?

 

0
micro3x avatar micro3x 135 Точки

Няма още качено видео, но межеш да гледаш това от миналия курс:

https://softuni.bg/trainings/coursesinstances/details/3

надявам се доста хора правят така и изпреварват събитията.

0
a.angelov avatar a.angelov 1316 Точки

Ето и моето домашно, коментарите и препоръките са добре дошли smile

HTML5-Overview-Homework

0
Filkolev avatar Filkolev 4482 Точки

Относно подредбата на самото домашно, може би е по-добре да се сложат в папката, която ще се архивира, всички HTML файлове, отделно да има папка за CSS-ите и още една Resources за картинките и останалите неща. Поне така ми препоръчаха днес на упражнения. Трябва просто да се оправят релативните пътища по файловете. 

А може и твоят да е по-добрият вариант. Добре ще е някой от предния випуск да сподели кое се е установило като по-добра практика, т.е. е по-лесно за проверяване впоследствие.

0
a.angelov avatar a.angelov 1316 Точки

Мисля, че всеки вариант, който е удобен за проверяващия е правилен :) От моя гледна точка прецених, че така е достатъчно добре - всяка задача в отделна папка.

0
26/09/2014 11:07:15
ZvetanIG avatar ZvetanIG 907 Точки

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

Това, което мога да предложа всяка задача да е в отделна папка (отделен проект), а вътре да си разхвърляте файлвете на проекта в папки (особенно за по-големите задачи). Важно е да има някакъв ред във файловете.

Друго което бих посъветвал a.angelov  е да си слага смислени имена на файловете, за да може името да го ориентира какво има вътре. Имена като Problem1 или Task1 не са добри. Мъчете се да си създавате навици от рано, защото после ще берете ядове.

6
26/09/2014 11:01:34
a.angelov avatar a.angelov 1316 Точки

6-та задача ти е празна - предполагам не си я довършил просто още?

0
velio84 avatar velio84 241 Точки

"HTML и CSS ще ви бъдат като лятна ваканция", ама друг път... laughing

Вярно, че никога не съм се занимавал с html и css и може би от там идва проблема, но тръгнах да правя 5 задача от домашното и след ~4 часа се справих... Факт е, че не знаех на css пропертитата и като нямам още усет кое как трябва да бъде, всичко е здраво налучкване и проба-грешка.

В началото явно си трябват железни нерви yell

Отивам да си направя чай от мента и продължавам с 6-та....

едит: за хората, които ще продължат тоя курс на Линукс, можете да си инсталирате gcolor2 - програмка за екстракт на цветове. Бодвате цвят по екрана и ви дава кода му. От терминала, ако сте с debian базиран линукс:

sudo apt-get install gcolor2

 

3
26/09/2014 12:23:29
a.angelov avatar a.angelov 1316 Точки

С 6-та направо ще си починеш ;) 5-та вярно си е играчка и без css просто няма как да се направи - щеш не щеш научаваш нови неща по-рано :)

0
Filkolev avatar Filkolev 4482 Точки

Така е, в 6-та имаш само един фонов цвят, който да сложиш в CSS-a, и един italic на една от страниците имаше. Там имаш и много повторение, реално горната половина на всяка страница е с еднакво съдържание. Казаха ми, че може с PHP да стане по-лесно (да буташ еднаквото съдържание, където трябва), но със знанията към момента - копи-пейст.

5-та би трябвало да е със звезда според мен, наистина е голяма играчка и си убих 2-3 часа да наглася всичко, както исках да бъде.

0
dim4o avatar dim4o 288 Точки

Вие използвате ли този валидатор: http://validator.w3.org/ ?

Има такъв и за CSS. Доста помага, защото показва грешките, които най-чесно идват от остарели практики и от грешно влагане на тагове един в друг. В контекста на този валидатор 4-та задача няма да мине написана по начините, които видях по-горе. В конкретния случай това според мен е някаква глупост. Защо да е грешка да влагаш два тага <ol> или да се влага <ul> в <ol>? Пробвайте, вероятно ще ви излезят доста грешки.

2
a.angelov avatar a.angelov 1316 Точки

За четвърта задача видях решение на колега в съседна тема точно за нея - влага ol/ul в самото li и така се валидира без проблеми. А иначе и моето решение не се валидира със същите грешки, които ти посочи... 

А за валидатора - да, хубаво е да се ползва за да бъде кода ни максимално близко до правилата. Друг е въпроса, че са малко сайтовете, които се валидират на 100% включително и такива на известни компании...

Сега си направих тест - сайта на майкрософт www.microsoft.com - 533 Errors, 470 warning(s) cool

1
26/09/2014 16:36:19
dim4o avatar dim4o 288 Точки

Да така е, големите сайтове и изобщо почти всички сайтове не се валидират на 100%, но все пак като правя HTML страница на няколко реда предпочитам да се постарая да е валидна :)

1
Dominik avatar Dominik 82 Точки

Здравей колега,

Честно казано аз не съм ползвал валидатор за задачите не бях се сетил :). Но след като направи забележка за 4-тата задача ми стана интересно дали наистина е "грешно" да се нестват ul и оl. И след като я пуснах за валидация , единствените грешки, които ми откри бяха, че не съм ползвам CSS да list-style-на ul-те и ol-те. Предполагам си имал предвид някое определено домашно, че няма да се валидира по този начин, както и да е няма значение. Аз лично не смятам, че невалидацията на един сайт го прави задължително грешен и неграмотно написан. Все пак главната цел на един сайт е да работи коректно и да изглежда добре, пък и както спомена Наков в една от лекциите дори сайта на Аpple не се валидира :P. Но не отричам, че е хубаво за начинаещи хора (каквито предпомагал, че сме по-голямата част от випускът-ни) да свикнем да пускаме кода през валидатор-а. Така, че благодаря за подсказката.

 

1
a.polyanska avatar a.polyanska 107 Точки

Здравейте,

 

Имам две питания:

Първо, задачите от домашното изискват да се използват различни цветове, фонове и т.н. О тлекцията стана ясно, че да се вмъкват в хтмл кода не е ок и е добре да се ползва CSS. Аз, обаче, съм си истински начинаеща и все още нямам понятие от тези неща и тепърва разучавам що е то HTML-ът. Какво се очаква да направя- да използвам лоши, но работещи практики или да поразуча в аванс CSS? Вие как сте го направили?

И второ, имам проблем с вмъкването на картинки. Когато слагам в документа картинка от интернет се получава, но когато я сваля на компютъра не става. Използвам Visual Studio и промених мястото, където проектите ми се запазват, там запазвам и картинката. Дали може от там да е проблема? Изписвам по този начин: <img src="nerd.jpeg"/> (пак казвам- jpg-ът и html файлът са в една и съща папка).

0
Filkolev avatar Filkolev 4482 Точки

Сигурна ли си, че разширението е .jpeg, а не .jpg?

За първото домашно - аз не мисля, че е грешно да се ползват грешните начини. Даже в една от задачите си пише да проиграем старите тагове. При положение, че CSS не сме учили, когато ни е зададено домашното, не смятам на оценяването да санкционирам хората, които не са го проучили в аванс. Надявам се повече хора са на този принцип, въпреки че аз горе-долу съм наясно със CSS и съм го ползвал на няколко задачи.

Има още време, така че може да си редактираш задачите след като мине лекцията в неделя. Тогава би трябвало да ти се изяснят доста неща.

0
a.polyanska avatar a.polyanska 107 Точки

Прав си- jpg е разширението, но пак не става. Пробвах в друга папка да го запаметя и да напиша пътя да нея- ни-що. Някакви идеи?

Благодаря за насоките по първото питане :)

0
a.angelov avatar a.angelov 1316 Точки

Няма проблем като начало да си пишеш стиловете в хтмл кода - поне за първата лекция. Следващата лекция ще е за CSS основи и там ще е разяснено по-подробно как се ползва и пише css, включително и трите начина за писането му, от които разбира се най-правилен е да се пише в отделен css файл. 

Ако искаш може да гледаш авансово лекцията от предния випуск и да се опиташ да направиш домашното с външни css-и.

В img тага махни наклонената черта не се слага такава...

0
a.polyanska avatar a.polyanska 107 Точки

Здарвейте,

Искам отново да попитам за домашното:

1. На 4та задача (тази с листовете)- прегледах постнатите тук задачки и виждам, че навсякъде в подлистовете (Nested Item 2.1, Nested Item 2.2. и т.н.) номераиите (2.1, 2.2, 2.3) са въведени като текст ръчно. Чудех се има ли по-кадърен начин за автоматично номериране, така че, ако в последствие се наложи добавяне на нов подлист да не променяме на ръка номерациите, което лесно може да доведе до грешка. Опитах само номерата да са въведени в отделен ol, но нещо се замотах кой е отварящ, кой- затварящ на кой лист... С една дума не ми се получи, но мисля, че грешката е в мен, а не в липсата на такава опция :)

2. Пак тези моите картинки. В крайна сметка се справих с това да излизат, но си мислех- не е ли по-добре в домашното специално да се вкарват картинки от мрежата, иначе проверяващият няма как да види крайния резултат?

0
Dominik avatar Dominik 82 Точки

Здравей,

Относно номерирането на Nested item-те. Аз лично не мисля, че е възможно това да се постигне с HTML/CSS може би с намесата на JavaScript би станало :).  За да си спестиш объркването с таговете (демек сега тоя затворих ли го и някви такива мешании :) ) ползвай някое по прилично IDE (webstorm , Sublime text и т.н.) те ще ти ги оцветяват и става доста по трудно да се объркаш.

А относно 2-рото ти въпросче , не мисля, че е проблем да ползваш картинки локално стига да ги предадеш и тях в домашното. 

Ето ти пример как може да го структурираш :

HTML Basics ( ти е папката с 1-вото домашно да речем) вътре в нея имаш папка /images(където са всички картинки ползвани направата на домашното) и примерно папка /css ( където ще си съхраняваш .css файловете. 

И накрая зипваш тази HTML Basic папка и я качваш като домашно :). Аз лично смятам, че този начин не е труден и за проверяващите, разбира се може да има и много по хитри и готини начини за структуриране на домашните аз просто ти давам пример ;).

1
a.polyanska avatar a.polyanska 107 Точки

@ Dominik

Ахаааа, да, не ми беше хрумнало да предам нещо по-умно от htmlфайловете :) Благодаря!

А за умното номериране, успокояваш ме, че не става само с html (за css още не си и помислям, и html за мен е още нещо като извънземен език :)).

Като стана дума- кое IDE бихте препоръчали? С Visual Studio имахме тежки принципни разминавания снощи и го изгоних от компютъра въобще, Brackets по някаква причина въобще не можах да изтегля и сега се боря да пиша на NotePad++, но не мисля, че дружбата ни ще просъществува дълго.

1
Dominik avatar Dominik 82 Точки

@ a.polyanska

Ами IDE-тата за HTML са доста така, че имаш голям избор :). Аз лично бих ти препоръчал да ползваш Webstorm принципно е платен, но за нас ( студентите от софтуни) има безплатен лиценз(пратен на пощата) , Webstorm-a е доста лесен за ползване и има доста функционалности/хинтове. Иначе аз мисля да ползвам Sublime text малко си поиграх вчера да го сетна, но накрая успях. Спрях се на него, защото дочух от доста колеги да го хвалят :) , ще видим дали ще ми допадне и на мен.

1
27/09/2014 12:05:58
asyamincheva avatar asyamincheva 20 Точки

Ще се счита ли за вярно, ако на задача 5 за фона използваме <body background="">, вместо CSS?

0
Dominik avatar Dominik 82 Точки

asyamincheva

Тъй като все още не сме взели CSS смятам, че няма да има проблеми. Пък и крайният резултат е един и същ :)

0
asyamincheva avatar asyamincheva 20 Точки

В случая без HTML единственият проблем е, че самото изображение се нарежда по целия екран...май не се изразих правилно, но мисля, че ме разбрахте...

0
Dominik avatar Dominik 82 Точки

@asyamincheva 

Явно аз съм те разбрал погрешно първият път.

Сега ако разбирам правилно проблема е, че картинката се повтаря няколко пъти по екрана?

Ако да, слагаш и следното property {background-repeat: no-repeat;} можеш после с width и heigth да си я направиш колко да е голяма и т.н. Надявам се съм помогнал.

 

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.