Google Chrome дээр HTML эхийг хэрхэн үзэх талаар

Эх сурвалжийн кодыг үзэж вэбсайт хэрхэн бий болгосон талаар олж мэдээрэй

Вэб дизайнераар карьераа эхэлмэгц би бусад гайхалтай бусад дизайнеруудын хийсэн ажлыг шалгаж үзсэн. Би ганцаараа биш. Вэбсайт эсвэл шинэ үеийн ахмадын аль нь ч байсан өөр өөр вэбсайтын HTML эх сурвалжийг үзэж байгаа нь таны карьерын туршид олон удаа хийх боломжтой зүйл юм.

Веб дизайны шинэ зүйл хийдэг хүмүүсийн хувьд сайтын эх кодыг харах нь зарим зүйлсийг хэрхэн хийхийг харах хамгийн амархан арга замуудын нэг бөгөөд та энэ ажлаас суралцаж, өөрийн ажилд тодорхой код эсвэл техникийг ашиглах боломжтой болно. Өнөөдөр ажиллаж байгаа ямар ч вэб дизайнер, тэр дундаа үйлдвэрлэлийн эхэн үеэс эхлэн энэ салбарт ажиллаж байсан хүмүүсийн хувьд, тэд өөрсдийнхөө харж, сонирхож байсан вэб хуудасны эх сурвалжийг харснаар HTML сурч мэдсэн нь аюулгүй мөрийтэй тоглоом юм. by. Вэб дизайны номыг уншиж , мэргэжлийн бага хуралд оролцохоос гадна вэб сайтын эх кодыг харах нь эхлэгчдэд HTML сурахад тохиромжтой арга юм.

Зүгээр л HTML бол илүү

Санаж явах нэг зүйл бол эх файлууд нь маш төвөгтэй (мөн таны үзэж буй вэбсайт илүү төвөгтэй байдаг, сайтын код нь илүү төвөгтэй байдаг). Таны үзэж буй хуудсыг бүрдүүлж буй HTML бүтэцээс гадна CSS вэб хуудсыг харуулах болно. Үүнээс гадна, өнөөдөр олон вэбсайт нь HTML-тэй хамт скрипт файлыг багтаах болно.

Үнэндээ олон скрипт файл байж болох юм, үнэндээ, тус бүр нь сайтын янз бүрийн талбаруудыг хүчирхэгжүүлэх болно. Чухамдаа, сайтын эх код нь үүнийг хийхэд шинэ зүйл бол маш их хэцүү санагддаг. Хэрэв та тэр сайтад юу болж байгааг мэдэх боломжгүй бол санаа зовох хэрэггүй. HTML эх сурвалжийг харах нь энэ үйл явцын эхний алхам юм. Бага зэрэг туршлагатай бол энэ бүх хэсгүүд нь таны браузер дээр хардаг вэбсайтыг хэрхэн бүтээхийг илүү сайн ойлгох болно. Кодыг илүү сайн мэддэг болсон тохиолдолд үүнээс илүү ихийг сурч мэдэх боломжтой болно.

Тэгэхээр та вэбсайтын эх кодыг хэрхэн үзэж байна вэ? Google Chrome хөтчийг ашиглан алхам алхмаар зааварчилгааг хийнэ үү.

Алхам зааврыг дагах

  1. Google Chrome вэб хөтөчийг нээнэ (хэрэв танд Google Chrome суулгаагүй бол энэ нь үнэгүй татаж авах боломжтой).
  2. Та шалгаж үзэхийг хүсч буй вэб хуудас руугаа залуур .
  3. Хуудсаа дарж , гарч ирэх цэсийг хараарай. Тэр цэснээс, дарж хуудасны эхийг харах .
  4. Тухайн хуудасны эх кодыг хөтөч дээр шинэ цонх хэлбэрээр харуулах болно.
  5. Өөрөөр хэлбэл, та CTRL + U -ийн гарны товчлууруудыг компьютер дээр байрлуулж вэб сайтын эх кодтой цонх нээхийн тулд ашиглаж болно. Mac дээр энэ товчлол нь Command + Alt + U юм.

Хөгжүүлэгчийн хэрэгсэл

Google Chrome-ийн энгийн харах хуудсын чадвараас гадна та сайт руу гүн гүнзгий ухахын тулд маш сайн Хөгжүүлэгчийн хэрэгслүүдийн давуу талыг ашиглаж болно. Эдгээр хэрэгслүүд нь зөвхөн HTML-ийг харахаас гадна HTML баримт дахь элементүүдийг харахад хамааралтай CSS юм.

Chrome-ын хөгжүүлэгч хэрэгслийг ашиглахын тулд:

  1. Google Chrome-ийг нээнэ үү .
  2. Та шалгаж үзэхийг хүсч буй вэб хуудас руугаа залуур .
  3. Браузерын цонхны баруун дээд буланд байгаа гурван мөр бүхий дүрс дээр дарна уу.
  4. Цэснээс илүү олон хэрэгслүүдийг дарж, дараа нь гарч ирсэн цэсэнд Хөгжүүлэгчийн хэрэгслийг дарна уу.
  5. Энэ нь цонхны зүүн талын HTML эх код болон баруун талын CSS-г харуулах цонхыг нээнэ.
  6. Өөрөөр хэлбэл, вэб хуудас доторх элементийг зөв дарвал сонгох цэснээс шалгах бол Chrome-ийн хөгжүүлэгчийн хэрэгсэл гарч ирэх бөгөөд таны сонгосон элемент нь HTML дээр баруун талд харагдах CSS-аар тодорно. Хэрэв та тухайн сайтыг хэрхэн тодорхойлсон талаар илүү ихийг мэдэхийг хүсвэл энэ нь маш их тустай.

Эх сурвалж кодыг хуульчилж байна уу?

Олон жилийн туршид вэб сайтын дизайнерууд сайтын эх кодыг үзэх боломжтой эсэхийг асууж, үүнийгээ боловсролынхоо төлөө ашигладаг, эцсийн эцэст хийж байгаа ажлаа хийх боломжтой эсэхийг асуусан. Сайтын кодыг хувилж хуулж, үүнийг өөрийн сайт дээр байршуулах нь үнэхээр хүлээн зөвшөөрөгдөхгүй байгаа тул энэхүү кодыг ашиглан үлгэр жишээг ашиглахын тулд кодыг ашиглаж байгаа нь үнэндээ энэ салбарт хэр их дэвшил гардаг юм.

Энэ өгүүллэгийн эхэнд дурдсанчлан, та сайтын эх сурвалжийг үзэх замаар ямар нэгэн зүйлийг сурч чадаагүй өнөөгийн ажлын вэбийг олж авахад хэцүү болно! Тиймээ, сайтын эх кодыг хууль ёсны гэж үздэг. Ийм кодыг ижил төстэй бүтээх эх сурвалж болгон ашиглах нь бас зүгээр юм. Таныг ажилд оруулснаар асуудал үүсч эхэлдэг тул кодоо кодолж, түүнийгээ өнгөрөөх болно.

Эцсийн эцэст, вэбсайтууд бие биенээсээ суралцаж, тэдний харж, урам зоригтой ажил дээрээ ихэвчлэн сайжруулдаг. Тиймээс сайтын эх кодыг үзэх, үүнийг сургалтын хэрэгсэл болгон ашиглахыг эргэлздэггүй.