Giới thiệu về phát triển web

HTML 5 logo on an iPhone smartphone with app icons around it in a cloud
Chào mừng đến với trang web.

Trở lại trong ngày của tôi (OK, trước khi ngày của tôi), nghề nghiệp của nhà phát triển web là một thấp. Nó xếp hạng dưới đây con chó con ghét nhưng trên Yankees fan hâm mộ trên quy mô của danh dự chuyên nghiệp. Bởi vì tất cả các thẻ và hình ảnh minh bạch spacer chúng tôi sử dụng, chúng tôi đã được nhìn thấy như tin tặc thô không có cảm giác thẩm mỹ.

Cũng, chúng tôi vẫn có thể thiếu trong ý thức thẩm mỹ, nhưng như các trang web đã phát triển để có nghề nghiệp của nhà phát triển web. Những ngày này có vô số các công cụ chúng ta có thể sử dụng để làm cho tốt bằng văn bản, các tiêu chuẩn phù hợp, và xinh đẹp (OK, có lẽ không phải là tác phẩm mới nhất) các trang web. Hầu hết các trang web tuyệt vời mà bạn sử dụng ngày nay (không biết xấu hổ cắm: trong đó có một này) được xây dựng bằng cách sử dụng những công cụ này.

Bevy của chúng tôi các công cụ trên cùng của trình duyệt đã cho phép chúng tôi tạo ra những điều trên web mà là không thể tưởng tượng chỉ 10 năm trước, chẳng hạn như các mạng xã hội vô số tự xưng là cách tốt nhất để lãng phí thời gian của bạn, “nóng” khởi động công nghệ cao tuyên bố đã cách mạng hóa cái gì đó đã được thực hiện một ngàn lần, và nhân bản Angry Birds tự xưng là chỉ hơi tồi tệ hơn so với bản gốc. Tất cả trên web. Như vậy có lẽ những công cụ này đã không đi đến lớn nhất của việc sử dụng.

Vì vậy, những công cụ tuyệt vời, tôi đã nói về những gì đang có? Dẫn đầu đã có các (thẳng thắn tuyệt vời) tiếng gọi HTML5, CSS3, và JavaScript, mà tôi biệt danh 3 kỵ binh của webocalypse. Đây là một nhìn vào mỗi một:

HTML

HTML (đúng gọi là HyperText Markup Language; bạn có thể thấy lý do tại sao những người không muốn nhìn xấu chỉ cần sử dụng các từ viết tắt) là ngôn ngữ được sử dụng để đặt ra các trang web. Nhấp chuột phải vào trang này và nhấp “View Source”. Đó là HTML mà trang này sử dụng.

Cơ bản, HTML là một loạt các thẻ, mà trình duyệt giải thích và đưa ra. Ví dụ, nhìn vào mã HTML này:

<p>Tôi không biết về bạn, nhưng tôi thích các nút nhấn.</p>

<br>

<nút>Bấm vào tôi!</nút>

Mã HTML này đã văn bản được bao bọc trong một đoạn văn (các <p> tag bắt đầu một đoạn, các </p> tag kết thúc một đoạn văn.) Có một ngắt dòng (các <br>) và sau đó một nút bạn có thể bấm vào để nội dung trái tim của bạn. Trình duyệt của bạn sẽ đặt nó trên màn hình cho bạn.

Vì vậy, đó là tất cả tốt và tốt. Nhưng nếu bạn không có gì nhưng HTML, you get a webpage that looks like it came straight out of the 1990’s. Không có nhiều tốt ra khỏi thập kỷ đó anyway (kiểu tóc, nhạc, vv) Nhưng chờ đợi! Có nhiều!

CSS

Từ viết tắt khác. Mùa hè. CSS là viết tắt của Cascading Style Sheets, mà là một chút của một cái tên nhầm lẫn vì họ không thực sự thác (bất cứ điều gì có nghĩa là… đó là mã số máy tính, không phải là một thác nước!) CSS là ngôn ngữ được sử dụng để trang web phong cách. Này, quá, được giải thích bởi trình duyệt của bạn.

CSS và HTML làm việc cùng nhau – HTML làm cho bố cục của trang, CSS cung cấp cho nó sự tinh tế của nó. Hãy tưởng tượng việc xây dựng một ngôi nhà: HTML cung cấp các khung gỗ xám xịt nhưng cần thiết, CSS cho biết thêm các màu sắc neon và đồ nội thất kỳ quặc.

CSS là một ngôn ngữ khá đơn giản: cho các tag HTML nhất định (như một đoạn), bạn có thể chỉ định giá trị cho các lớp học phong cách khác nhau. Trình duyệt của bạn sẽ đọc CSS và áp dụng nó cho tất cả các thẻ phù hợp với HTML. Ví dụ:

p {

màu: đỏ;

font-size: 16px;

}

Vì vậy, mỗi đoạn (thứ trong HTML <p> thẻ) sẽ có đỏ phông chữ và được 16 pixel trong kích thước. Nếu bạn nhận thấy, đây là một số trong những phong cách mà bạn có thể sử dụng trong Microsoft Word và các ứng dụng khác.

Vì vậy, bây giờ trang web của bạn được đặt ra và họ trông khá. Nhưng đây là điều: đó là tất cả họ làm. Họ chỉ ngồi đó và nhìn đẹp. Đó là rất tốt và tất cả, nhưng người dùng của các trang web muốn nhiều hơn nữa. Họ muốn hình ảnh động ưa thích. Họ muốn cửa sổ pop-up (OK, có lẽ họ đã trở lại trong 2002, nhưng tôi lạc đề.) Họ muốn nút đó sẽ làm công cụ khi bạn bấm vào chúng.

Về mà mới nhất – đó là một vấn đề. Bạn có thể làm một <nút> trong HTML, và bạn có thể nhấp vào nó tất cả các tuần, nhưng nó không phải làm bất cứ điều gì trong thời gian tới. Nếu bạn muốn nút để, oh tôi không biết, di chuyển con voi của bạn trên màn hình và tấn công một cái gì đó, then you need something more.

JavaScript

JavaScript là không một từ viết tắt, nếu bạn đang tự hỏi. Họ gọi nó là JavaScript vì nó trông giống như các ngôn ngữ lập trình được gọi là Java, mà là lạ vì nó không làm. Dù sao, JavaScript là a proper programming language that causes all the dynamic effects bạn nhìn thấy trên các trang web.

Giống như bất kỳ ngôn ngữ lập trình, JavaScript là một loạt các lệnh mà làm cho các biến và sử dụng chức năng. Điều thú vị về JavaScript (cũng, là mát mẻ như một ngôn ngữ lập trình có thể) là bạn có thể truy cập vào các phần tử HTML (như đoạn văn và các nút) và phong cách CSS (như màu chữ và kích thước) và thay đổi chúng. Nhìn vào mã này:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – các $ sign tells the browser to find all matching elements, and the ‘pmeans it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (một lần nữa, this is all from the viewpoint of awebdev”) is how elegantly the three languages work together. Mà dòng cuối cùng của JavaScript tương tác với HTML của trang và CSS được sử dụng để tạo kiểu cho nó. Nó không giống như các thứ tiếng sau chỉ là các thành phần khác nhau của cùng một điều – họ là một và giống nhau, cạnh khác nhau của máy tuyệt vời cùng.

Âm thanh hấp dẫn? Tôi nghĩ rằng nó. Đó chỉ là một phần của vẻ đẹp của web.

Published by

Neel Mehta

Đại học Harvard. Nhà phát triển Web. Đôi khi triết học. Baseball nghiện.

One thought on “Giới thiệu về phát triển web”

Gửi phản hồi