Hướng dẫn khởi động nhanh HTML CSS PDF

Mỗi một trong số hơn 4 tỷ trang web trực tuyến ngày nay đều sử dụng ngôn ngữ đánh dấu HTML để hiển thị nội dung của nó. HTML ở khắp mọi nơi

Các nhà phát triển có kinh nghiệm biết rằng việc nắm vững các nguyên tắc cơ bản về HTML và CSS không chỉ là một kỹ năng thiết kế web thiết yếu mà còn là nền tảng vững chắc của một bộ kỹ năng mã hóa mạnh mẽ.

Trong Hướng dẫn bắt đầu nhanh về HTML & CSS, tác giả, người hướng dẫn và David DuRocher, cựu chiến binh hơn 10 năm của công ty công nghệ Fortune 500, đã chia nhỏ các nguyên tắc cơ bản của HTML5 và CSS3, các phân đoạn có thể quản lý, thực tế và hấp dẫn được thiết kế cho các nhà phát triển lần đầu

Cách tiếp cận độc đáo và hấp dẫn của David trong việc giảng dạy các nguyên tắc HTML và CSS có nghĩa là người đọc đã sẵn sàng bắt đầu thiết kế ngay từ chương đầu tiên mà không phải chịu đựng hàng loạt thuật ngữ nhàm chán hoặc kỹ thuật khô khan.

Sử dụng quyền truy cập tài sản kỹ thuật số kèm theo để vượt ra ngoài cuốn sách với dự án thực hành của riêng bạn, kho lưu trữ mã GitHub, công cụ trực tuyến, tài nguyên, v.v.

Bất kể bạn là sinh viên, người tìm việc đang tìm cách cải thiện sơ yếu lý lịch của mình, người làm việc tự do, nhà thiết kế, nhà phát triển có kinh nghiệm hay chỉ là người muốn tạo trang web của riêng họ từ đầu, mọi thứ bạn cần biết đều có ngay trong cuốn sách này

Thực sự là bất kỳ ai, ở bất kỳ giai đoạn nào trong cuộc đời, đều có thể học cách viết mã. HTML và CSS là điểm khởi đầu hoàn hảo trên hành trình đó—dễ học, dễ triển khai, HTML & CSS mở ra cánh cửa đến một thế giới đầy khả năng viết mã

và làm chủ. Nghiên cứu về Thiết kế web hiện đại [Hướng dẫn bắt đầu nhanh] có thể đạt được trực tuyến ngay lập tức. Ngày nay hầu hết các thư viện đều có

các ấn phẩm tham khảo của họ trên web cũng vậy. Chỉ cần đảm bảo rằng bạn không bị phân tâm bởi các trang web thoạt nhìn có vẻ thú vị nhưng không
liên quan đến hoạt động khám phá của bạn. Tiếp tục là mục tiêu. Dành một khoảng thời gian để nghiên cứu và bằng cách này, Bạn sẽ ít bị phân tâm
hơn bởi những thứ thực sự bạn khám phá được trên mạng vì thời gian và công sức của bạn có thể sẽ bị hạn chế. Hướng dẫn bắt đầu nhanh về HTML và CSS.
Hướng dẫn đơn giản hóa dành cho người mới bắt đầu để phát triển một nền tảng viết mã mạnh mẽ, xây dựng trang web đáp ứng và thành thạo. của Thiết kế web hiện đại [Hướng dẫn bắt đầu nhanh]


Sách CSS miễn phí, Sách CSS Pdf, Sách Pdf CSS, Tải xuống sách CSS Pdf, Tải xuống miễn phí sách CSS Pdf, Sách HTML miễn phí, Sách Pdf HTML, Sách Pdf HTML, Tải xuống sách Pdf HTML, Tải xuống miễn phí sách Pdf HTML, Sách CSS HTML miễn phí

Chúc mừng bạn đã quyết định học HTML và CSS. Những ngôn ngữ này được hàng tỷ người sử dụng hàng ngày trên các trang web và ứng dụng cũng như dưới vô số hình thức khác. Cho dù bạn đang lập kế hoạch xây dựng trang web, mong muốn có một cuộc trò chuyện sáng suốt với nhà phát triển hay chỉ muốn hiểu rõ hơn về thế giới xung quanh mình, thì cuốn sách này là một khởi đầu tuyệt vời

HTML và CSS ở mọi nơi

Gần như không thể bắt đầu một ngày của bạn mà không gặp phải HTML và/hoặc CSS. Những ngôn ngữ này ẩn đằng sau mọi trang web, hầu hết các màn hình ứng dụng, giao diện bảng điều khiển trò chơi điện tử và truyền hình và thậm chí cả màn hình tủ lạnh thông minh mới của bạn. Bạn liên tục sử dụng các kết quả của đoạn mã này nhưng có lẽ hiếm khi dừng lại để suy nghĩ về những gì ẩn giấu bên trong. Điều đó sắp thay đổi

Câu chuyện của tôi

Xin chào. Tên tôi là David. Tôi lớn lên ở một thị trấn nhỏ bên ngoài Rochester, New York. Tôi đã dành vô số thời gian trong thời thơ ấu của mình để khám phá khung cảnh bên ngoài tuyệt đẹp của ngoại ô New York, Vermont và New Hampshire qua những con đường mòn đi bộ đường dài và khu cắm trại phong phú

Tôi không có máy tính ở nhà, nhưng điều đó không có gì lạ vào thời điểm đó. Tôi bắt đầu quan tâm đến công nghệ từ rất sớm và trò chơi điện tử đã giúp thúc đẩy niềm đam mê này. Khi tôi có quyền truy cập vào máy tính, tôi bắt đầu tự học viết mã bằng ngôn ngữ lập trình có tên là CƠ BẢN. Ở trường trung học, tôi chuyển sang HTML, CSS và JavaScript

Khi quyết định chọn con đường nào, tôi đã xem xét khoa học máy tính, công nghệ phần mềm và các lựa chọn nặng về công nghệ khác. Cuối cùng, tôi quyết định theo học ngành công nghệ thông tin, ngành mà tôi coi là cầu nối giữa máy tính và khía cạnh con người của công nghệ. Tôi đã tham dự Học viện Công nghệ Rochester và có thể học hỏi từ một số giáo sư tuyệt vời, nhiều người trong số họ không có nền tảng liên quan đến máy tính. Họ trở thành giáo viên khi những kỹ năng họ học được phát triển thành một ngành công nghiệp mới. Các giáo sư này đã giúp tôi nhận ra rằng các kỹ năng chia sẻ mà tôi học được có thể dưới nhiều hình thức

Vào năm 2008, sau khi chuyển đến Thành phố New York và làm việc trong lĩnh vực của mình được vài năm, tôi đã được mời làm giáo sư trợ giảng tại Trường Cao đẳng Công nghệ Thành phố CUNY, nơi tôi hoàn thiện chương trình giảng dạy thiết kế web bằng cách giới thiệu các công nghệ web khác nhau mà tôi đã sử dụng. . Kể từ đó, tôi đã chuyển sang các trường khác, nơi tôi dạy nhiều lớp khác nhau về HTML và CSS, JavaScript, PHP và WordPress. Tôi thích quá trình giảng dạy, chứng kiến ​​sự tự tin của các sinh viên mới tăng lên khi họ cảm thấy thoải mái hơn với những ý tưởng mới và xem bóng đèn nhấp nháy khi họ thấy cách họ có thể sử dụng kiến ​​thức mới của mình

Ngoài công việc giảng dạy, tôi làm việc cho Adobe với tư cách là người quản lý tài khoản kỹ thuật hỗ trợ bộ sưu tập sản phẩm Adobe Experience Cloud. Tôi vẫn thực hiện nhiều dự án phát triển web tự do và khi không xây dựng mọi thứ trực tuyến, tôi ngắt kết nối bằng cách đi bộ đường dài hoặc cắm trại trên những con đường mòn địa phương của chúng tôi hoặc ở vùng núi Vermont và New Hampshire. Ở nhà, tôi lao vào chế biến gỗ và nuôi ong. Vợ tôi và tôi làm việc với nhiều tổ chức cứu hộ động vật khác nhau và đang khôi phục lại ngôi nhà thời Victoria Shingle năm 1897 của chúng tôi ở góc tây bắc Connecticut [hình 1]

Học tại chỗ luôn là một phần trong cuộc sống của tôi. Mặc dù nền giáo dục của tôi đã cho tôi nhiều kỹ năng, ngành công nghệ vẫn liên tục thay đổi. Kỹ năng số một mà tôi đã phát triển được là học cách học. Tôi luôn thấy mình nghiên cứu và học hỏi các công cụ, kỹ thuật và chiến lược mới cho công việc mà tôi làm

Với tinh thần không ngừng học hỏi trong bối cảnh luôn thay đổi, tôi muốn viết cuốn sách này để tạo ra một hướng dẫn nhanh chóng nhưng toàn diện về các công cụ mà tôi thấy là có giá trị nhất và được sử dụng nhiều nhất trong kinh nghiệm của mình với tư cách là một nhà phát triển web.

Tại sao nên học HTML và CSS?

Có rất nhiều lý do tại sao bạn có thể chọn cuốn sách này. Bạn có thể quan tâm đến mã hóa và ai đó đã gợi ý rằng bạn nên bắt đầu với HTML và CSS. Công ty của bạn có thể cần xây dựng hoặc tân trang một trang web. Bạn có thể muốn bắt đầu một công ty thiết kế web. Hoặc, giống như tôi, bạn có thể chỉ đơn giản là có một mong muốn học hỏi vô độ

Bất kể động lực của bạn là gì, HTML và CSS là một nơi tuyệt vời để bắt đầu học cách viết mã. Các ngôn ngữ chỉ yêu cầu trình soạn thảo văn bản và trình duyệt web—hai thứ bạn đã có trên máy tính của mình. Và HTML và CSS cung cấp sự hài lòng ngay lập tức. Bạn có thể đặt một vài dòng HTML vào tệp văn bản, lưu nó, sau đó mở tệp trong trình duyệt và xem ngay kết quả của bạn

Phản hồi tức thì khi viết HTML có thể hấp dẫn và làm hài lòng những người không coi mình là chuyên gia máy tính. Kết quả xuất hiện với một vài hướng dẫn đơn giản. Ngay cả sự hiểu biết cơ bản về cách sử dụng các công cụ này cũng có thể mang lại cho bạn cảm giác chuyển từ người dùng máy tính sang siêu người dùng. Mặc dù không phải là lập trình về mặt kỹ thuật, nhưng việc viết đánh dấu giao diện người dùng bằng các ngôn ngữ như HTML và CSS cho phép bạn cung cấp hướng cho máy tính để hiển thị nội dung theo cách chính xác mà bạn mong muốn

Q. HTML có phải là ngôn ngữ lập trình không?

Về mặt kỹ thuật, HTML không phải là ngôn ngữ lập trình. HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. Ngôn ngữ đánh dấu "đánh dấu" văn bản với hướng dẫn để hiển thị—trong trường hợp này, thông qua trình duyệt web. Mặt khác, các ngôn ngữ lập trình sử dụng các câu lệnh điều khiển logic để điều khiển luồng thực thi của chương trình. Các chương trình nhận đầu vào và tạo đầu ra, trong khi HTML và các ngôn ngữ đánh dấu có liên quan định dạng nội dung hiện có. Cả hai đều được gọi là mã hóa, nhưng có một sự khác biệt tinh tế

WordPress

WordPress vượt trội trong việc tạo blog và trang web nhưng loại bỏ một số quyền kiểm soát mà bạn có đối với mã HTML và CSS. Thật đơn giản để thêm một trang hoặc bài đăng trên blog, nhưng việc tùy chỉnh giao diện tổng thể của trang web hoặc tạo chủ đề trang web mới yêu cầu kiến ​​thức về HTML và CSS. Ngay cả khi bạn sử dụng WordPress, việc biết HTML và CSS sẽ biến các kỹ năng nhập dữ liệu WordPress của bạn thành kỹ năng của một nhà phát triển web WordPress chính thức

Wix và Squarespace

Wix, Squarespace và các công cụ xây dựng trang web khác là những nền tảng tuyệt vời để xây dựng trang web. Giao diện dễ sử dụng của họ cho phép bạn tạo một trang web đơn giản mà không cần kiến ​​thức về HTML. Cả Wix và Squarespace đều cho phép tùy chỉnh, nhưng một số HTML, CSS và JavaScript tùy chỉnh không thể thực hiện được trong nền tảng của họ. Hơn nữa, trang web bạn xây dựng không thể được tải xuống và sử dụng trên các máy chủ web khác. Bạn phải tiếp tục mua dịch vụ của họ để duy trì trang web của bạn

Ai có thể hưởng lợi từ cuốn sách này?

Bất kỳ chuyên gia nào sử dụng internet và công nghệ đều có thể hưởng lợi từ việc biết HTML và CSS. Trong quá trình viết cuốn sách này, một trong những biên tập viên của chúng tôi đã than thở rằng những rào cản mà anh ấy gặp phải ở vị trí trước đây có thể tránh được nếu anh ấy có thể tự mình thay đổi mã trang web. Nhân viên CNTT và nhóm lập trình phải xử lý các yêu cầu của anh ấy, làm chậm quy trình làm việc của anh ấy và tạo ra gánh nặng đáng kể hơn cho bộ phận CNTT

Sinh viên phát triển web

Bạn đang học xây dựng website?

nhà giáo dục

Bạn sẽ dạy phát triển web chứ? . Nó cung cấp hướng dẫn từng bước sẽ giúp bạn đưa học sinh của mình vượt qua quá trình học tập một cách dễ dàng

Sáng kiến ​​khoa học, công nghệ, kỹ thuật và toán học [STEM] đang nở rộ ở các trường tiểu học, trung học cơ sở và trung học phổ thông trên toàn thế giới. Nhiều nhà giáo dục đang vượt qua ranh giới kiến ​​thức của họ để mang giáo dục công nghệ đến với học sinh ở độ tuổi nhỏ hơn. Cuốn sách này hoạt động như một hướng dẫn cho sinh viên ở mọi lứa tuổi và có thể được sử dụng để hỗ trợ các giáo viên không có nhiều kinh nghiệm trong lĩnh vực phát triển web

Chuyên gia liền kề

Có lẽ công việc của bạn không yêu cầu bạn viết mã trang web, nhưng bạn làm việc với một nhà phát triển hoặc nhóm làm việc đó. Hiểu quy trình sẽ cho phép bạn có những cuộc trò chuyện sáng suốt và có thể biện hộ cho nhu cầu của bạn. Nếu bạn phải thuê một nhà thiết kế web, bạn sẽ có lợi thế trong quá trình phỏng vấn, cho phép bạn đưa ra quyết định tuyển dụng tốt hơn

Các nhà tiếp thị và nghệ sĩ đồ họa thường xuyên tương tác với các nhà thiết kế web. Biết HTML và CSS sẽ có lợi cho [các] dự án của bạn và cho phép bạn cung cấp nhiều giá trị hơn cho tổ chức của mình

Các chuyên gia đang tìm kiếm một tài liệu tham khảo / mồi nhanh

Với các ví dụ dễ làm theo và hướng dẫn rõ ràng, cuốn sách này rất tuyệt vời để làm tài liệu tham khảo hoặc bồi dưỡng nhanh cho một công cụ mà bạn không sử dụng thường xuyên hoặc cho ai đó quay lại cuộc chơi

Người yêu thích web

Nhiều người xây dựng trang web để giải trí, như một dự án đam mê hoặc sở thích. Hướng dẫn này sẽ cung cấp nền tảng để bắt đầu xây dựng trang web của bạn từ đầu

Các vai trò việc làm được hưởng lợi từ kiến ​​thức HTML/CSS

Nếu mục tiêu tổng thể của bạn là trở thành một lập trình viên hoặc nhà phát triển, HTML/CSS là một nơi tuyệt vời để bắt đầu

Có một lợi ích nhất định khi học HTML và CSS, ngay cả khi trở thành nhà phát triển không phải là mục tiêu cuối cùng của bạn. Vì nhiều hoạt động hàng ngày của chúng ta liên quan đến một loại máy tính nào đó, nên có nghĩa là nhiều nhân viên hơn phải có hiểu biết cơ bản về cách máy tính hiển thị dữ liệu. Ngay cả những người quản lý và trợ lý văn phòng đôi khi chịu trách nhiệm sửa đổi các trang web, vì vậy biết cách thực hiện việc này sẽ mang lại cho bạn lợi thế rõ ràng so với những ứng viên khác

Hãy xem xét kỹ hơn một số vai trò tại nơi làm việc sử dụng HTML/CSS

Nghệ sĩ / Nhà thiết kế đồ họa

Vì HTML và CSS về cơ bản là một phương pháp để hiển thị nội dung, nên có nghĩa là các nhà thiết kế đồ họa sẽ được hưởng lợi từ việc hiểu đầy đủ về các công nghệ này để giới thiệu tác phẩm của họ. Kiến thức về mã HTML và CSS cần thiết để hiển thị nội dung đồ họa trên web mang lại cho nhà thiết kế một lợi thế to lớn

Nhà tiếp thị

Các nhà tiếp thị thường cần tạo tài liệu mới cho các sáng kiến ​​​​bán hàng. Trang đích và thông điệp tiếp thị qua email là những cách tuyệt vời để giới thiệu sản phẩm của bạn và kêu gọi khách hàng hành động và những trang này sử dụng mã HTML và CSS. Kiến thức cơ bản về HTML/CSS sẽ cho phép bạn phản ứng nhanh với các cơ hội tiếp thị

Nhà văn / Nhà cung cấp nội dung

Trong quá khứ [không xa], các phóng viên và nhà báo sẽ đánh máy các bài báo của họ sau đó chuyển chúng cho người khác để in bố cục. Giờ đây, với sự phát triển của internet và nội dung dựa trên blog, các nhà văn thường được yêu cầu định dạng tác phẩm của họ ở định dạng gần như sẵn sàng cho internet. Mặc dù nhiều ấn phẩm sử dụng các hệ thống quản lý nội dung như WordPress, nhưng thường cần phải chỉnh sửa mã HTML để đảm bảo hiển thị phù hợp

Quản lý phương tiện truyền thông xã hội

Mặc dù việc quản lý lượt thích, lượt chia sẻ, bình luận và tin nhắn lại có thể chiếm một phần lớn trong lịch trình của người quản lý phương tiện truyền thông xã hội, nhưng việc tìm nguồn cung ứng và cung cấp nội dung hấp dẫn là cực kỳ quan trọng. Biết cách sử dụng các liên kết và mã HTML và CSS cơ bản sẽ cho phép chuyên gia truyền thông xã hội định dạng tốt hơn các bài đăng và nội dung được liên kết, giúp họ vượt lên trong cuộc cạnh tranh

Kỹ sư Đảm bảo Chất lượng Sơ cấp

Nhiều chuyên gia đảm bảo chất lượng [QA] chịu trách nhiệm kiểm tra phần mềm và trang web. Hiểu mã hiển thị đằng sau giao diện người dùng mang lại lợi thế cho kỹ sư đảm bảo chất lượng khi tạo các bài kiểm tra và chuẩn bị báo cáo

Thử nghiệm QA hiện đại đã phát triển theo quy trình thử nghiệm tự động. Thông thường, việc định cấu hình các hệ thống này yêu cầu kiến ​​thức về HTML và CSS

phi lợi nhuận

Các tổ chức phi lợi nhuận có nhiều nhu cầu giống như các công ty lớn hơn, với một điểm khác biệt đáng kể. họ thường thiếu ngân sách để thuê các nhà phát triển toàn thời gian. Nếu bạn là nhân viên của một tổ chức phi lợi nhuận, bạn có thể củng cố tổ chức của mình bằng cách học HTML và CSS. Với kiến ​​thức thiết kế web, bạn có thể xây dựng và duy trì trang web của tổ chức mình, thiết kế các chiến dịch tiếp thị qua email và tận dụng triệt để lợi thế của phương tiện truyền thông xã hội

Doanh nhân / Chủ doanh nghiệp nhỏ

Nếu bạn đang bắt đầu công việc kinh doanh của riêng mình, bạn đã biết trước rằng mọi thứ đều tốn tiền và các kỹ năng và bí quyết kỹ thuật đặc biệt đắt đỏ. Biết cách xây dựng trang web của bạn có thể giúp bạn tiết kiệm được một khoản tiền lớn

Ngay cả khi bạn không thể tự mình thiết kế toàn bộ trang web, việc cung cấp một bản mô phỏng các ý tưởng của bạn sẽ tiết kiệm thời gian cho nhà thiết kế của bạn. Và biết HTML và CSS sẽ giúp bạn đưa ra quyết định tuyển dụng tốt hơn với nhân viên kỹ thuật và nhà thầu của mình

Cuốn sách được cấu trúc như thế nào và bạn sẽ học như thế nào

Với mỗi chương, tôi sẽ giới thiệu các khái niệm mới thông qua giải thích, minh họa và ví dụ độc lập. Tôi sẽ cung cấp ngữ cảnh cho từng chủ đề, vì vậy bạn sẽ biết tại sao nó lại hữu ích. Khi có liên quan, tôi sẽ thêm chi tiết cụ thể từ kinh nghiệm chuyên môn của riêng tôi

Để thêm vào trải nghiệm học tập, chúng tôi sẽ cung cấp cho bạn một trang web thực tế mà bạn sẽ làm việc không liên tục trong suốt cuốn sách. Trang web sẽ được trình bày cho bạn cần rất nhiều tình yêu và sự quan tâm dịu dàng. Tuy nhiên, khi bạn hoàn thành cuốn sách này và hoàn thành tất cả các bài tập, bạn sẽ sẵn sàng cung cấp một sản phẩm web chất lượng cao, đầy đủ chức năng—hãy xem Truy cập trang web của quán cà phê ở phần sau trong phần này để biết hướng dẫn tải xuống và hơn thế nữa

Mục tiêu của chúng tôi là giúp bạn hoàn thành cuốn sách này với sự hiểu biết vững chắc về HTML và CSS. Chúng tôi sẽ thực hiện điều này thông qua sự kết hợp của các tài nguyên, bao gồm cả cuốn sách, sự phát triển của trang web Coffee Shop có thể tải xuống và một loạt các tài nguyên giáo dục và hữu ích khác

Dành chút thời gian ghé thăm www. clydebankmedia. com/htmlcss-assets và truy cập Tài sản kỹ thuật số của bạn. Chúng tôi sẽ giới thiệu bạn quay lại đây để truy cập vào các nguồn khác nhau trong suốt cuốn sách. Tuy nhiên, bây giờ, hãy dành vài phút và xem video ngắn có tiêu đề Sử dụng Kho lưu trữ GitHub của chúng tôi

Ngoài Kho tài sản kỹ thuật số, chúng tôi cũng đang lưu trữ một số tài nguyên thiết yếu trên trang ClydeBank Media GitHub. Truy cập trang web. github. com/clydebankmedia. Tìm kho lưu trữ htmlcss-quickstartguide và nhấp để mở. Bên trong, bạn sẽ tìm thấy tất cả mã nguồn của chúng tôi cho cuốn sách này

Nền tảng chia sẻ mã xã hội này [GitHub] sử dụng hệ thống quản lý mã nguồn Git phổ biến. Sử dụng Git sẽ hữu ích nếu bạn làm việc theo nhóm và nó mang lại lợi ích cho các dự án của một nhà phát triển, nhưng việc sử dụng các chức năng lớn hơn của trang web là không cần thiết ở giai đoạn học tập này của bạn. Chúng tôi sẽ trình bày chi tiết về Git trong phần IV của cuốn sách. Hiện tại, chỉ cần truy cập ngay vào trang GitHub của chúng tôi và khám phá. Bạn không thể phá vỡ bất cứ điều gì

Mã nguồn bên trong kho lưu trữ htmlcss-quickstartguide được sắp xếp theo chương và số Đoạn mã. Sẽ dễ dàng tìm thấy bất kỳ đoạn mã nào được tìm thấy trong cuốn sách. Hơn nữa, bạn có thể tự do sử dụng bất kỳ ví dụ mã hóa nào của chúng tôi cho các dự án trang web của riêng bạn [hình 2]

Sử dụng kho lưu trữ htmlcss-quickstartguide của chúng tôi trên GitHub để dễ dàng sao chép và dán bất kỳ mã nào có trong cuốn sách này

Nhân tiện, rất nhiều bài tập Tự làm mà bạn gặp trong cuốn sách này có thể được hỗ trợ bởi một mẫu HTML cơ bản. Chúng tôi đã tạo Mẫu dành cho người mới bắt đầu trang web có thể tìm thấy cả trong thư mục 00-Giới thiệu trong GitHub và trong tệp có thể tải xuống của chính nó, bộ khởi động. html bên trong Kho tài sản kỹ thuật số tại clydebankmedia. com/htmlcss-tài sản

người bắt đầu. html

vi>

utf-8>

nội dung khung nhìn=chiều rộng=chiều rộng thiết bị, quy mô ban đầu=1, thu nhỏ để vừa với=không>

Thiết lập không gian làm việc của bạn

Một trong những điều tuyệt vời khi làm việc với HTML là việc bắt đầu không yêu cầu gì khác ngoài trình soạn thảo văn bản và trình duyệt web. Từ quan điểm của người mới bắt đầu, việc bạn chọn trình soạn thảo văn bản và trình duyệt web nào không quan trọng, nhưng nếu bạn nghiêm túc với việc đào tạo HTML của mình, bạn có thể muốn có một số công cụ cụ thể. Tôi sẽ đề cập đến một số công cụ trong phần phụ hoặc chú thích, nhưng bây giờ, hãy bắt đầu với những điều cơ bản

Tầm quan trọng của cấu trúc thư mục

Trước khi bạn bắt đầu viết bất kỳ mã nào, bạn nên tạo một thư mục hoặc thư mục trên máy tính của mình, nơi lưu trữ tất cả các tệp trang web của bạn

Mặc dù chắc chắn có thể đặt tất cả các tệp của bạn vào một thư mục, nhưng kỹ thuật này sẽ nhanh chóng trở nên lộn xộn. Đưa ra những lựa chọn tốt về tổ chức trang web sẽ giúp bạn tiết kiệm thời gian và sự thất vọng khi trang web của bạn phát triển. Một trang web nhỏ, ở mức tối thiểu, sẽ có một thư mục cho các tệp HTML [ít nhất là một chỉ mục. html] và một thư mục cho các tệp và hình ảnh CSS

Tệp HTML, thư mục CSS và thư mục hình ảnh

Bạn có thể kết thúc với nhiều tệp hơn trong thư mục chính của mình. Hơn nữa, nếu trang web của bạn có nhiều tiểu mục, bạn có thể sẽ nhận được các thư mục cụ thể cho từng tiểu mục

Chọn một trình soạn thảo văn bản

Các tệp HTML chỉ đơn giản là các tài liệu văn bản được lưu bằng phần mở rộng tệp. html hơn là. txt. Bất kỳ trình duyệt nào cũng sẽ hiển thị các tệp HTML. Vì mã HTML hoàn toàn dựa trên văn bản nên các chương trình cơ bản như Notepad trên Windows, TextEdit trên Mac hoặc gedit trên Linux là những tùy chọn hoàn toàn hợp lệ cho người viết mã HTML [hình 4]

Windows Notepad với một tệp HTML đơn giản

Tuy nhiên, để làm cho cuộc sống dễ dàng hơn, tôi khuyên bạn nên có một trình chỉnh sửa mã tốt. Trình chỉnh sửa mã là trình soạn thảo văn bản được thiết kế đặc biệt để sắp xếp mã HTML [và các ngôn ngữ lập trình khác] theo kiểu có tổ chức. Chúng sử dụng mã màu, thụt đầu dòng và một loạt các tính năng khác hỗ trợ lập trình viên viết và duy trì mã

Một lần nữa, không cần có công cụ nào trong số này để bắt đầu, nhưng nếu bạn cảm thấy khó theo dõi hoặc đọc mã trong trình soạn thảo văn bản tiêu chuẩn, hãy dùng thử một trong những chương trình này

Dưới đây là các trình soạn thảo văn bản phổ biến nhất tính đến thời điểm xuất bản. Nhiều phần mềm miễn phí/mã nguồn mở hoặc có sẵn với một mức giá nhỏ

Mã phòng thu trực quan

Sổ tay ++

vim

Emac

Văn bản tuyệt vời

Mỗi trình soạn thảo này đều có ưu và nhược điểm, nhưng nếu bạn gặp khó khăn trong việc quyết định, tôi khuyên bạn nên cài đặt cả Visual Studio Code và Notepad++. Có vẻ lạ khi sử dụng hai trình soạn thảo, nhưng tôi sử dụng Notepad ++ để chỉnh sửa nhanh, một tệp và Visual Studio Code đầy đủ tính năng để quản lý các trang web lớn hơn. Có thể phù hợp với cả hai kịch bản, nhưng đây là những đề xuất của tôi. Vào cuối ngày, lựa chọn trình soạn thảo văn bản của lập trình viên là vấn đề sở thích cá nhân và hầu hết mọi tùy chọn đều ổn. Nếu bạn muốn có một đề xuất rõ ràng, thì tôi khuyên bạn nên tải trình soạn thảo văn bản Visual Studio Code, vì hầu hết các ví dụ và bài tập trong cuốn sách này sẽ mô tả hoạt động của trình soạn thảo văn bản đó [hình 5]

Visual Studio Code với cùng một tệp HTML như trong hình 4. Lưu ý các tab trình duyệt tệp, tô sáng cú pháp và các tính năng nâng cao khác không có trong Windows Notepad

Trình duyệt web phổ biến

Thật khó để trở thành một nhà thiết kế web mà không có trình duyệt web. May mắn thay, tất cả các hệ điều hành chính bao gồm một. Đối với Windows, mặc định là Edge; . Tại thời điểm xuất bản, Google Chrome chiếm phần lớn thị phần trình duyệt [hình 6]

Thị phần trình duyệt tính đến tháng 10 năm 2020

Nguồn. gs. máy đếm tiền. com

Bạn có thể sử dụng bất kỳ trình duyệt nào để bắt đầu, nhưng điều cần thiết là phải hiểu rằng các trình duyệt khác nhau có thể hiển thị nội dung khác nhau. Khi xây dựng một trang web, cách tốt nhất là kiểm tra kết quả của bạn trong nhiều trình duyệt để đảm bảo rằng nội dung hiển thị theo mong đợi của bạn. Một số trình duyệt cho phép nhiều kiểu mã hóa hơn để tương thích. Nói cách khác, họ dễ tha thứ hơn những người khác [chẳng hạn như họ cho phép bạn viết mã cẩu thả hơn và cố gắng đoán xem ý của bạn là gì]. Các trình duyệt khác nghiêm ngặt hơn và yêu cầu mã phải được cấu trúc theo cách chính xác để hiển thị chính xác

Nếu bạn không muốn mất thời gian so sánh các trình duyệt khác nhau, lựa chọn dễ dàng và an toàn nhất tại thời điểm xuất bản là Google Chrome. Chrome có lẽ là trình duyệt tốt nhất để làm việc vào lúc này vì nó tuân thủ chặt chẽ các tiêu chuẩn thiết kế web đã được thiết lập. Tất cả các trình duyệt trong hình 6 đều có sẵn để tải xuống miễn phí

Phần mềm chỉnh sửa hình ảnh

Có thể bạn đã quen thuộc với phần mềm chỉnh sửa hình ảnh, từ Photoshop đặc trưng của Adobe cho đến Microsoft Paint rất cơ bản. Tuy nhiên, bạn có thể không biết rằng phần mềm chỉnh sửa hình ảnh là một thành phần thiết yếu trong không gian làm việc HTML của bạn. Ngay cả khi bạn không định bắt tay vào bất kỳ công việc thiết kế đồ họa quan trọng nào, bạn vẫn sẽ cần chỉnh sửa hình ảnh để chúng hiển thị tối ưu trên internet

định cỡ. Kích thước hình ảnh là một trong những cân nhắc cần thiết khi chỉnh sửa hình ảnh. Các tệp hình ảnh phải được tải xuống từ web bằng trình duyệt, vì vậy việc không tối ưu hóa hình ảnh của bạn có thể dẫn đến thời gian tải chậm cho trang web của bạn. Hình ảnh được chụp trên máy ảnh hoặc điện thoại thông minh quá lớn để hiển thị trên trang web và phải được thay đổi kích thước bằng phần mềm chỉnh sửa hình ảnh

Định dạng. Nhiều trình duyệt web chấp nhận một loạt các tệp hình ảnh, nhưng. jpg,. png và. gif là phổ biến nhất. JPEG [. jpg] rất tốt cho ảnh, trong khi. png và. tệp gif hoạt động tốt cho hình minh họa hoặc đồ họa nhỏ hơn. Trong trường hợp hình ảnh bạn muốn sử dụng không ở định dạng bạn mong muốn, phần mềm chỉnh sửa hình ảnh sẽ giúp bạn chuyển đổi nó sang định dạng mong muốn

Chủ Đề