Đang tải... (xem toàn văn)
CSSBài 1 Tổng quan,CSSBài 2 Bộ chọn,CSSBài 3 Background,CSSBài 4 Font,CSSBài 5 Text,CSSBài+6+Pseodu(+Phần+tử+giả),CSSBài 7 Box model,CSSBài 8 Float, Clear,CSSBài 9 Block, Inline,tailieucsscoban, giáo trình CSS,HTML 5 và CSS 3,Tổng quan CSS,một vài kỹ thuật css cần tránh,css tiếng việt cơ bản hay, HTML hay, giáo trình HTML đầy đủ nhất
Trường ĐH Công nghệ thông tin& Truyền thông Thái Nguyên VIETSOURCE.NET & CLB TIN HỌC- ICTU Hướng dẫn: Vũ Công Tịnh Email: VuCongTinh@Gmail.Com Chương trình học Chuẩn bị học lập trình web? Tổng quan internet & web Phần I: Lập trình web với HTML, CSS JAVASCRIPT Chương 1: Lập trình web với HTML Chương 2: Định dạng website với CSS Phần II: Xây dựng ứng dụng web động với PHP& MySQL Chương 1: Căn PHP& MySQL Chương 2: Xây dựng website bán hàng PHẦN I: Lập trình web với HTML, CSS Cần chuẩn bị gì? Web browser( Trình duyệt web): IE( Internet Explorer), Mozzila Firefox, Google Chrome, Safari, Opera,… Text editor( Trình soạn thảo): Notepad, Notepad++, Editplus, E-TextEditor, Macro Dreamviewer, PHP Designer,… Một số add-ons Firefox: Firebug, Colozilla, Measurelt, Web Developer,… Môi trường làm việc cho PHP: Một số gói phần mềm tích hợp Apache, PHP, MySQL, phpMyAdmin,… như: - Appserv( Dành cho WinXP), XAMPP, WAMPServer, Vertigo,… Một số phần mềm Upload file qua FTP: CuteFTP, FlashFXP, Filezilla,… Video tham khảo: - Công cụ: http://bit.ly/vsnet-chuanbi - Hướng dẫn XAMPP: http://bit.ly/vsnet-xampp Tổng quan internet & web • Mạng máy tính? Là hệ thống máy tính kết nối với nhau, chia sẻ liệu cho • WWW= World wide web: Là hệ thống server chứa thông tin( siêu văn bản) mà người dùng sử dụng thông qua web browser • Client- Server Là mô hình mạng máy tính, đó: o Server( Máy chủ): Là máy tính sử dụng để máy tính truy cập, máy truy cập vào gọi máy khách( client) Ví dụ: - Khi truy cập vào http://vietsource.net + Server: Là máy chủ chứa liệu http://vietsource.net + Client: Máy tính cá nhân Tổng quan internet & web • TCP/IP: Là giao thức truyền liệu máy tính Mỗi máy tính có địa IP(Internet Protocol) xác định, địa IP cụm gồm số giới hạn từ >255 có dạng: A.B.C.D Ví dụ: 14.0.18.152 • Domain name( Tên miền): Là định danh để xác định vị trí máy tính mạng Internet Domain name có không trùng Ví dụ: Chỉ có domain VIETSOURCE.NET • VPS( Máy chủ ảo: Virtual Private Server): Là phương pháp phân vùng vật lý máy chủ thành nhiều máy chủ ảo, có CPU, Ram HDD riêng • Hosting: Là phần không gian lưu trữ máy chủ có cài dịch vụ FTP, WWW,… dùng để lưu trữ nội dung website Tổng quan internet & web Domain name Web Hosting Ví dụ: - Việt Nam máy chủ, Hà Nội, TP HCM,… VPS, khu đất nhà bạn hosting, nhà công trình khác website, việc thiết kế website giống xây nhà - IP website tương tự tọa độ nhà( gồm kinh độ vĩ độ), IP khó nhớ nên domain name( tên miền) đời, tên miền địa nhà bạn( Số nhà 123- Z115- TP Thái Nguyên) Tổng quan internet & web • Website tĩnh: - Là website khả tương tác với người dùng, thường viết ngôn ngữ HTML, DHTML, • Website động: - Là website có tính tương tác cao người dùng quản trị, xây dựng ngôn ngữ ASP, PHP,… với kết hợp sở liệu Website động có phần quản trị web để cập nhật nội dung website Như: website tin tức, bán hàng,… Ví dụ: Phần bình luận cho thành viên diễn đàn VIETSOURCE.NET( Tính tương tác cho người dùng) Website Sau tạo cho website trước bắt đầu học Vào Start -> Notepad Gõ vào nội dung sau Vào File > Save as > File name: Điền helloworld.html Encoding: Chọn UTF- Chọn vị trí cần lưu sau chọn Save Website Mở file vừa lưu trình duyệt xem kết Làm website bạn sẵn sàng cho học Bài HTML cấu trúc I Giới thiệu HTML - HTML( Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản, đưa vào chuẩn web năm 1994 - HTML ngôn ngữ đánh dấu ngôn ngữ lập trình, nhằm tạo trang web tĩnh dựa thẻ đánh dấu( tags), dựa vào thẻ đánh dấu để trình duyệt xác định cách hiển thị II Cấu trúc tài liệu HTML - Một tài liệu HTML file văn chứa thẻ đánh dấu - Một tài liệu HTML phải có đuôi( phần mở rộng): html htm … Ví dụ: index.html, default.html, vietsource.html,… - Cấu trúc chung tài liệu HTML + : Xác định tài liệu HTML + : Xác định phần đầu Website, chứa thông tin website ( Như tiêu đề, mô tả, tác giả… ) + : Xác định phần thân web Nơi hiển thị toàn nội dung 1website Simple CSS Standard Edition WallPearl 12.5 Thuộc tính max-height: Max-height thuộc tính CSS dùng để quy định chiều cao tối đa cho thành phần web 12.6 Thuộc tính min-height: Min-height thuộc tính CSS dùng để quy định chiều cao tối thiểu cho thành phần web Lưu ý: Thông thường chiều cao thành phần web văn trang web định Việc định chiều cao xác cho thành phần tạo cuộn văn chiều cao văn lớn chiều cao định Các thuộc tính max/min-width/height sử dụng trường hợp bạn không giá trị xác cho width, height thành phần Ví dụ, bạn vùng chứa post forum có bề ngang 500px, bạn định max-width:500px cho phần hình ảnh phần để tránh ảnh lớn bị lệch Trang 51 Simple CSS Standard Edition WallPearl Bài 13: Float & Clear 13.1 Thuộc tính float: Float (theo nghĩa tiếng Việt thả trôi) thuộc tính CSS dùng để cố định thành phần web bên trái hay bên phải Box B di chuyển sang không gian bao quanh trái Đây thuộc tính cần thiết dàn trang (như tạo trang web column layout hay Content tràn lên để lắp “khoảng trống” column layout), hiển thị văn thành cột (giống kiểu Format > Columns MS Word vậy), hay thực việc định vị trí ảnh text (như số kiểu text wrapping MS Word) Để rõ xem hình minh họa sau chế hoạt động float: Thuộc tính float có giá trị: + Left: Cố định phần tử bên trái + Right: Cố định phần tử bên phải + None: Bình thường Nhìn vào hình minh họa thấy ban đầu box lớn có hai thành phần Box B phần Content Lúc đầu Box B nằm bên Content nằm bên dưới, đặt thuộc tính float cho Box B Box B bị cố định bên trái chừa lại khoảng trống bên trái Còn phần Content vốn nằm bên tự động tràn lên để lắp đầy khoảng trống Box B tạo Ở ví dụ sau, thực float ảnh logo sang trái để phần nội dung bên tràn lên nằm cạnh logo Trang 52 Simple CSS Standard Edition WallPearl #logo { float:left; } Một ví dụ khác thử dùng float để chia cột văn .column1, column2 { width:45%; float:left; text-align:justify; padding:0 20px; } column1 { border-right:1px solid #000 } 13.2 Thuộc tính clear: Đi với thuộc tính float, CSS có thuộc tính clear Thuộc tính clear thuộc tính thường gán vào phần tử liên quan tới phần tử float để định hướng xử phần tử Ở ví dụ trên, float ảnh qua trái văn tràn lên để lắp vào chỗ trống Nhưng đặt vào văn thuộc tính clear có quyền định xem phần văn có tràn lên hay không Thuộc tính clear có tất thuộc tính: left (tràn bên trái), right (tràn bên phải), both (không tràn) none Thử dùng thuộc tính clear với giá trị khác đoạn văn ví dụ float ảnh logo Trang 53 Simple CSS Standard Edition WallPearl Bài 14: Position Kết hợp với thuộc tính float học, thuộc tính position mang lại nhiều khả để tạo cách trình bày tiên tiến xác cho trang web Nguyên lý hoạt động position: Hãy tưởng tượng cửa sổ trình duyệt bạn giống hệ tọa độ với position bạn đặt đối tượng web vị trí hệ tọa độ Giả sử muốn định vị ảnh vị trí 70px cách đỉnh 90px từ bên trái tài liệu, viết CSS sau: img { position:absolute; top:70px; left:90px } Trang 54 Simple CSS Standard Edition WallPearl Như bạn thấy, định vị CSS công nghệ xác để định vị thành phần Nó dễ dàng so với việc dùng bảng, ảnh suốt hay thứ khác 14.1 Absolute position: Định vị tuyệt đối định vị mà thành phần định vị không để lại khoảng trống tài liệu Một thành phần định vị tuyệt đối nhận giá trị position absolute Các đối tượng định vị tuyệt đối dùng kết hợp với thuộc tính top, left, right, bottom để xác định tọa độ Ví dụ sau cho cách đặt bốn ảnh bốn góc tài liệu định vị tuyệt đối #logo1 { position:absolute; top:50px; left:70px } #logo2 { position:absolute; top:0; right:0 } #logo3 { position:absolute; bottom:0; left:0 } #logo4 { position:absolute; bottom:70px; right:50px } Trang 55 Simple CSS Standard Edition WallPearl 14.2 Relative position: Sự định vị tương đối cho thành phần định vị tính từ vị trí gốc tài liệu Các thành phần định vị tương đối để lại khoảng không tài liệu Các thành phần định vị tương đối nhận giá trị position relative Chúng ta làm lại ví dụ thay absolute thành relative Các bạn ghi nhận lại vị trí ảnh logo lúc áp dụng thuộc tính position none, absolute relative rút nhận xét Hai học trên, bạn học thuộc tính CSS float position Hai thuộc tính mang lại cho bạn nhiều lựa chọn việc dàn trang Nó xác dễ thực so với phương pháp dùng bảng hay ảnh suốt Trang 56 Simple CSS Standard Edition WallPearl Bài 15: Layers CSS hoạt động chiều: cao, rộng, sâu Hai chiều đầu tiên, nhìn thấy học trước Trong học này, học cách đặt thành phần web lớp khác với thuộc tính z-index Nói đơn giản cách bạn đặt thành phần lên thành phần khác Với mục đích này, bạn gán cho phần tử số Theo đó, phần tử có số cao nằm trên, phần tử có số thấp nằm Ví dụ sau đặt ảnh logo lớp #logo1 { position:absolute; top:70px; left:50px; z-index:1 } #logo2 { position:absolute; top:140px; left:100px; z-index:2 } #logo3 { position:absolute; top:210px; left:150px; z-index:3 } Trang 57 Simple CSS Standard Edition WallPearl #logo4 { position:absolute; top:280px; left:200px; z-index:4 } #logo5 { position:absolute; top:350px; left:250px; z-index:5 } Trang 58 Simple CSS Standard Edition WallPearl Bài 16: Web Standards Trong công việc thiết kế web vấn đề quan trọng đảm bảo trang web bạn hiển thị tốt hầu hết trình duyệt Hiểu rõ vấn đề W3C (World Wide Web Consortium) – tổ chức có nhiệm vụ quản lý đặc tiêu chuẩn web với đối tác khác Microsof, Mozilla Foundation,… đặt tiêu chuẩn mã cho web Nó cho phép nhà phát triển web tự tin thực dự án đảm bảo cho trang web thỏa mãn tiêu chuẩn hiển thị tốt nhiều trình duyệt Để dễ dàng Trong CSS, W3C tạo công cụ gọi CSS Validator để đọc thẩm định tính hợp chuẩn cho CSS bạn Đầu tiên, bạn truy cập vào địa sau click here Đặt url file CSS bạn ô url nhấn nút “click to check stylesheet” để chương trình đọc file CSS bạn Sau đọc xong, file CSS bạn không phù hợp tiêu chuẩn, chương trình hiển thị danh sách lỗi Nếu file CSS bạn hợp chuẩn chương trình ảnh chứng nhận Bạn đặt ảnh trang web bạn để thể xây dựng mã chuẩn Trang 59 Simple CSS Standard Edition WallPearl Phụ Lục: Bảng Thuộc Tính & Giá Trị Thuộc Tính Thuộc tính background background-color background-image background-repeat backgroundattachment background-position font Mô tả Giá trị Background Thuộc tính rút gọn cho tất background-color thuộc tính background-image background-repeat background-attachment background-position Thiết lập màu cho đối tượng transparent Thiết lập ảnh cho đối url tượng none Thiết lập chế độ lặp ảnh repeat repeat-x repeat-y no-repeat Thiết lập ảnh cuộn/cố scroll định fixed Thiết lập vị trí thể ảnh top left top center top right center left center center center right bottom left bottom center bottom right x% y% xy Font Thuộc tính ngắn cho tất font-style thiết lập font font-variant Trang 60 Simple CSS Standard Edition font-style font-variant font-weight font-size font-family color text-indent text-align letter-spacing text-decoration WallPearl font-weight font-size font-family Thiết lập chế độ in nghiêng, normal xiên hay bình thường italic oblique Thiết lập font bình thường normal hay small-caps small-caps Thiết lập in đậm, thường normal bold bolder lighter 100 – 900 Thiết lập kích cỡ font xx-small x-small small medium large x-large xx-large smaller larger % Thiết lập loại font hiển thị family-name trang web/ đối tượng web generic-family Text Thiết lập màu chữ Thiết lập khoảng thụt đầu dòng % Thiết lập chế độ canh văn left right center justify Thiết lập khoảng cách normal ký tự Thêm hiệu ứng đặc biệt cho none văn underline Trang 61 Simple CSS Standard Edition text-transform :link :hover :visited :active margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right WallPearl Change case văn overline line-through blink none upper lower capitalize Pseudo-classes Liên kết chưa thăm Mouse over thành phần Liên kết thăm Kích hoạt thành phần Margin Thuộc tính ngắn cho thiết margin-top lập margin margin-right margin-bottom margin-left Thiết lập canh lề cho auto thành phần % Thiết lập canh lề phải cho auto thành phần % Thiết lập canh lề cho auto thành phần % Thiết lập canh lề trái cho auto thành phần % Padding Thuộc tính ngắn cho thiết padding-top lập padding padding -right padding -bottom padding -left Thiết lập đệm cho thành phần % Thiết lập đệm phải cho thành phần % Trang 62 Simple CSS Standard Edition padding-bottom padding-left border border-width border-color border-style border-top-width border-top-color border-top-style border-right-width border-right-color border-right-style border-bottom-width border-bottom-color border-bottom-style border-left-width border-left-color WallPearl Thiết lập đệm cho thành phần Thiết lập đệm trái cho thành phần Border Thuộc tính ngắn cho tất thiết lập border cho thành phần Thiết lập độ rộng đường viền % % border-width border-color border-style thin medium thick Thiết lập màu cho đường viền Thiết lập kiểu đường viền none hidden solid dotted dashed double groove ridge inset outset Thiết lập độ rộng viền phía Thiết lập màu viền phía Thiết lập kiểu viền phía Thiết lập độ rộng viền phải Thiết lập màu viền phải Thiết lập kiểu viền phải Thiết lập độ rộng viền bên Thiết lập màu viền bên Thiết lập kiểu viền bên Thiết lập độ rộng viền trái Thiết lập màu viền trái Trang 63 Simple CSS Standard Edition border-left-style width max-width min-width height max-height min-height float clear position top right bottom WallPearl Thiết lập kiểu viền trái Width Thiết lập chiều rộng đối auto tượng % Thiết lập chiều rộng tối đa none cho đối tượng % Thiết lập chiều rộng tối thiểu cho đối tượng % Height Thiết lập chiều cao cho auto đối tượng % Thiết lập chiều cao tối đa cho none đối tượng % Thiết lập chiều cao tối thiểu cho đối tượng % Layout Position Cố định đối tượng left right none Cách thức xử đối left tượng liên quan với đối tượng right floated both none định vị đối tượng relative absolute Thiết lập tọa độ đỉnh đối auto tượng % Thiết lập tọa độ bên phải đối auto tượng % Thiết lập tọa độ đáy đối auto tượng % Trang 64 Simple CSS Standard Edition left z-index WallPearl Thiết lập tọa độ bên trái đối auto tượng % Định lớp đối tượng auto number Trang 65 [...]... tính và giá trị có thể có hoặc không: Nội dung - Một số thẻ không cần thẻ đóng ( Để đúng chuẩn chúng ta thêm dấu gạch chéo vào phía sau): , , , … Video tham khảo: - http://bit.ly/vsnet-cautruchtml Bài 2 Một số thẻ cơ bản 1 Thẻ - Vị trí: Sau thẻ mở và trước thẻ mở - Chứa thông tin về website( nhưng không hiển thị) cho trình. .. viết,… Bài 2 Một số thẻ cơ bản - Ví dụ: Thành viên đang kích hoạt của VietSource.Net sử dụng thẻ Câu lệnh: Thành viên đang kích hoạt - Nên sử dụng các thẻ heading cho: + Danh mục menu + Tiêu đề bài viết + Chuyên mục … Video tham khảo http://bit.ly/vsnet-thehtml Bài 2 Một số thẻ cơ bản 5 Một số thẻ định dạng văn bản a) Thẻ định dạng đoạn văn bản - Cú pháp: Đoạn văn bản - Thẻ ... Để biểu diễn bảng trong HTML chúng ta sử dụng cặp thẻ Bên trong cặp thẻ này chứa 1 số thẻ khác có chức năng định nghĩa các thuộc tính trong bảng: dòng, cột,… 1 Thẻ - Cặp thẻ dùng để khai báo 1 bảng - Các thuộc tính: + width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị % hoặc px + height: Chiều cao bảng + bgcolor: Định màu nền của bảng + background:... top( trên), middle( giữa), bottom( dưới) Bài 4 Tạo bảng trong HTML 3 Thẻ : table data - Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng ( table data) - Cặp thẻ nằm bên trong cặp thẻ Ví dụ: http://jsbin.com/iqukih/1/edit - Một số thuộc tính: + width: Độ rộng của cột + height: Chiều cao của cột Bài 4 Tạo bảng trong HTML + align: Định vị trí nội dung trong cột( theo chiều... bgcolor: Định màu nền của bảng + background: Định ảnh nền của bảng + border: Độ lớn đường viền của bảng + bordercolor: Màu của đường viền + align: Căn vị trí của bảng so với toàn website Giá trị: left, right, center + cellspacing: Định độ dày của khung + cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng Bài 4 Tạo bảng trong HTML - Ví dụ: Ví dụ font chữ Bài 2 Một số thẻ cơ bản 6 Một số thẻ khác - Thẻ : Là 1 thẻ quan trọng trong HTML, được sử dụng để phân chia các lớp trong website thay cho việc dùng bảng( table) như trước đây( Sẽ nghiên cứu thêm ở phần CSS) - Thẻ xuống dòng : Trong HTML để xuống 1 dòng mới ta phải sử dụng thẻ xuống dòng hoặc ( Theo chuẩn XHTML) Có 1 số thẻ mặc định nội dung bên trong... đậm và căn giữa tự động Ví dụ: http://jsbin.com/iqukih/2/edit - : Bên trong cặp thẻ dùng để nhóm các nhóm dữ liệu với nhau Bài 4 Tạo bảng trong HTML Một số lưu ý: - Số cặp thẻ ( số cột) trong các dòng phải bằng nhau để tránh vỡ khung của bảng - Đối với ô trống( không có nội dung) nên sử dụng thẻ hoặc thay cho khoảng trống 5 Gộp cột, dòng trong bảng - Là việc tùy biến bảng... loại bỏ số dòng( hoặc cột) để cân đối bảng Xem ví dụ: http://jsbin.com/iqukih/4/edit đã loại bỏ 1 cột ở dòng thứ 2 Vì dòng 1 đã có 2 dòng được gộp Bài 4 Tạo bảng trong HTML - Ví dụ: http://jsbin.com/iqukih/7/edit Video tham khảo: http://bit.ly/vsnet-table Bài tập -Tạo 1 bảng như hình 1 ( baitap/2-btap1.jpg) - Tạo 1 website như hình 1 và 2 (baitap/2-btap2-1.png và baitap/2-btap2-2.png) - Tạo 1 website... nền + text: Định màu chữ( toàn bộ website) Bài 2 Một số thẻ cơ bản + link: Định dạng màu của liên kết trong website( Mặc định các liên kết là màu xanh blue) + alink: Định dạng màu của liên kết đang hoạt động( khi nhấn giữ chuột vào liên kết đó) + vlink: Định dạng màu liên kết đã ghét thăm( Mặc định liên kết chúng ta đã click vào thường có màu vàng) + leftmargin( căn lề trái), topmargin ( căn lề trên)... như đối với - Để loại bỏ các kiểu đánh thứ tự đối với 2 loại “ol” và “ul” chúng ta sử dụng thuộc tính type với giá trị là none Ví dụ: http://jsbin.com/abulim/6/edit -Ngoài ra có thể sử dụng CSS để tùy biến danh sách trong HTML ( Sẽ tìm hiểu ở phần CSS) Bài 5 Danh sách ( list) 3 Danh sách định nghĩa - Khác với “ol” và “ul”, cặp thẻ được dùng để định nghĩa 1 đối tượng nào đó - Bên