HTML là viết tắt của cụm từ Hypertext Markup Language ( Hiểu nghĩa là Ngôn ngữ đánh dấu siêu văn bản bằng thẻ ). HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử dụng các thẻ html để biểu diễn các trang web. Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. File HTML là 1 text file (file văn bản) có chứa các thẻ (tag). File HTML sẽ có phần đuôi là .html
ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG BÁO CÁO THỰC TẬP CƠ SỞ ĐỀ TÀI TÌM HIỂU HTML,CSS VÀ TEMLATES CHO WEBSITE MÃ NGUỒN MỞ WORDPREES Giáo viên hướng dẫn : Th.s Lê Văn Chung Sinh viên thực hiên : Chẩu Văn Hành Lớp : CNTT K12C THÁI NGUYÊN, NĂM 2016 MỤC LỤC LỜI NÓI ĐẦU Hiện nay, công nghệ thông tin ngày phát triển Với Template bạn thấy ứng dụng mã nguồn mở phổ biến như: WordPress … Template mẫu layout thiết kế sẵn, người dùng cần tải chỉnh sửa chút cho phù hợp chức đem vào sử dụng Với template có sẵn tiết kiệm thời gian suy nghĩ Ví dụ khung ảnh có sẵn bạn cần tải ảnh lên xong, website xây dựng hết kích thức phần nội dung, hình ảnh, sidebar,… bạn cần tải thông tin lên thành trang website hoàn chỉnh Tuy nhiên, sử dụng template có hạn chế: thiết kế sẵn nên thường đáp ứng hết chức người sử dụng, sửa chữa khó hoàn hảo thiết kế từ đầu Tùy vào nhu cầu, mục đích thiết kế website bạn mà chọn kiểu thiết kế layout từ đầu hay sử dụng template có sẵn HTML cho phép nhà phát triển, lập trình web tạo trang web có tính ưu việt Không vậy, HTML đem đến cho người dùng trải nghiệm tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú HTML CSS làm cho ứng dụng web trang website hấp dẫn HTML có tính thêm vào việc giúp cho việc xây dựng ứng dụng website dễ dàng nhiều Ngoài ra, HTML CSS giúp nhà thiết kế Website dễ dàng việc tạo hiệu ứng động trò chơi tương tác mà không cần dùng đến Flash Đó lý em lựa chọn đè tài “Tìm hiểu HTML CSS Temlates cho website mã nguồn mở Wordprees ” CHƯƠNG 1: GIỚI THIỆU VỀ HTML VÀ CSS 1.GIỚI THIỆU VỀ HTML VÀ CSS 1.1 Đinh nghĩa HTML HTML viết tắt cụm từ Hypertext Markup Language ( Hiểu nghĩa "Ngôn ngữ đánh dấu siêu văn thẻ" ) - HTML ngôn ngữ lập trình máy tính mà ngôn ngữ sử dụng thẻ html để biểu diễn trang web Do Tim Berner Lee phát minh W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994 File HTML text file (file văn bản) có chứa thẻ (tag) File HTML có phần đuôi html 1.2 Các thành phần thẻ HTML - Một document HTML bắt đầu kết thúc (trong bạn viết nhỏ viết hoa ) Nhờ có cặp TAG mà Browser biắt HTML - document để trình duyệt Những chữ để dành riêng cho Browser, người đọc nhận viết cặp TAG và Trong document html, thích dùng sau: Một số điều cần lưu ý soạn thảo siêu văn HTML: - Nhiều dấu cách liền có tác dụng dấu cách Phải sử dụng thẻ để thể nhiều dấu giãn cách liền - Gõ Enter để xuống dòng xem dấu cách, để xuống hàng phải sử dụng thẻ tương ứng - Có thể viết tên thẻ không phân biệt chữ in thường in hoa 1.3 Các thuộc tính thẻ HTML - Những thẻ HTML có thuộc tính riêng Những thuộc tính cung cấp thông tin thành - phần HTML wedsite Tag xác định thành phần trang HTML : Với thuộc tính thêm vào bgcolor, bạn báo cho trình duyệt biết với màu màu đỏ , giống sau : < body bglocor =” red” > Thẻ xác định dạng bảng HTML : với thuộc tính đường viền (border), bạn có - thể báo cho trình duyệt biết bảng đường viền : Thuộc tính luôn kèm cặp name/value : name= “value”( tên = “giá trị “ ) thuộc tính luôn thêm vào thẻ mở đầu thành phần HTML 1.3.1 Cơ thẻ HTML - HTML có hàng trăm thẻ tag khác Việc học hết thẻ html không cần thiết Sau thẻ html thường dùng tổng hợp Thẻ Headings Headings xác định với hai thẻ . xác định headings lớn xác định headings bé Cách viết - HTML tự động thêm dòng trắng trước sau heading Thẻ đoạn văn - Paragraph Một trang HTML (như trang tin tức) chia thành nhiều đoạn văn khác nhau, đoạn xác định thẻ thẻ tự động xuống dòng hết đoạn văn Cách viết: Thẻ in đậm, in ngiêng, gạch Cách viết: Thẻ xuống dòng – Line Breaks Thẻ sử dụng bạn muốn kết thúc dòng không muốn bắt đầu đoạn văn khác Thẻ tạo lần xuống dòng bạn viết Cách viết: Lời thich HTML - Thẻ thích sử dụng để thêm lời thích mã nguồn HTML - Một dòng thích dược bỏ qua trình duyệt Bạn sử dụng thích để giải thích - code bạn, để sau bạn có phải quay lại chỉnh sửa dễ dàng 1.3.2 Các ký tự đặc biệt HTML Một vài ký tự tương đương nhu dấu nhỏ chọn tiếp Menu Sau trình khởi tạo bạn thấy giao diện cấu hình menu chia làm phần: phần bên trái chứa đối tượng menu item định vào menu, phần bên phải hiển thị cấu trúc menu items bạn xếp Muốn xếp cấu trúc nhiều cấp bạn cần click kéo thả theo cấp độ phần bên phải Editor Theme WordPress Phần hỗ trợ cho bạn Coder nhiều Vì muốn can thiệp code, phải tải file máy tính cấu hình lại nội dung code sau tiến hành upload lên lại Tuy nhiên WordPress khảo sát mức độ nguy hiểm bạn WordPress Beginer nên WordPress để sẵn mục cho bạn dễ chỉnh sửa cấu hình trực tiếp không cần phải tải - Cập nhật tin quản lý viết + Thêm viết Để đăng post, bạn truy cập vào WordPress Dashboard, click vào menu Posts bên tay trái Menu Posts Dashboard Tại đây, bạn thấy giao diện trang đăng/sửa post WordPress bao gồm khu vực nhập tiêu đề post, nội dung post, khung soạn thảo, chọn category, nhập tag (thẻ phân loại), format (định dạng) post v v… Khung soạn thảo trang soạn Post - Quản lý tập tin tải lên Nếu thành viên muốn đưa tài liệu, giáo trình, giảng lên trang Web để lưu trữ chia sẻ tính Tải file giúp quản lý tập tin tải lên theo nhóm chủ đề quản trị quy định Ở meni Tải file, bạn bấm Quản lý chủ đề khai báo thông tin chủ đề cần tạo Tên chủ đề, Liên kết tĩnh (viết tiếng việt không dấu cách dấu gạch ngang), Mô tả, Quyền xem Quyền tải file (thiết lập cần thiết cho tài liệu nội bộ), xong bấm Lưu lại Đối với thành viên quản trị có hai cách thức tải tập tin lên máy chủ, bấm Thêm file tính Tải file, hai đưa chuột đến menu Tải file giao diện Website chọn chủ đề tập tin cần tải Còn với thành viên bình thường sử dụng tính tải tập tin từ giao diện Website Ở trang ra, điền đầy đủ thông tin Tên file, Tác giả, Email tác giả, Website hỗ trợ, bấm Browse để chọn tập tin tải lên (chỉ hỗ trợ doc, xls, Zip Rar), Dung lượng, Hình minh họa, Thông tin quyền, Giới thiệu ngắn gọn, Mô tả file, Tên bạn, nhập Mã an toàn vàbấm Gửi file Tập tin gửi lên chưa hiển thị trang web mà chờ kiểm duyệt quản trị viên, tập tin đưa vào danh sách File chờ kiểm duyệt CHƯƠNG XÂY DỰNG TEMPLATE CHO WEBSITE TIN TỨC 3.1 Xây dựng css - Phần Menu - Menu có chiều rộng 10px nên ta thiết lập chiều dài cho thẻ UL 47px #main-nav main-menu{margin-left:10px;} #main-nav ul li { font-size:20px; position: relative; display: inline-block; float: left; border:1px solid #232222; border-width:0 0 10px; height:47px; margin-top:15px; } Phần Cột trái #sidebar {float: right;width: 320px;} full-width #sidebar{display:none !important;} sidebar-left #sidebar{float:left;} sidebar-left content{float:right;} Phần Body #main-content{ background: #FFF; margin: 25px auto 30px; position: relative; -moz-box-shadow: 0 5px #cacaca; -webkit-box-shadow: 0 5px #CACACA; box-shadow: 0 5px #CACACA; padding:24px 28px; width:997px; } 3.2 Xây dựng html/php Chân trang #footer-widget-ar-*ea{ width:1045px; margin: auto; } Banner 3.3 Một số giao diện Hai cột Ba cột Các kiểu banner [...]... cho bạn Ngoài ra wordpress còn cung cấp cho bạn hàng ngàn theme khác để bạn có thể tải về và làm một website đẹp Nếu bạn vẫn không thích các theme của wordpress thì bạn có thể dễ dàng upload theme của bạn ( hoặc theme bạn mua) và cài đặt vào website Plugin mở rộng Mặc định wordpress đã cung cấp các tính năng đầy đủ cho người dùng cơ bản Nhưng nếu có nhu cầu mở rộng tính năng thì bạn có thể tải về và. .. động và hỗ trợ Đặt một câu hỏi trên diễn đàn hỗ trợ và nhận được sự giúp đỡ từ một tình nguyện viên, tham dự một WordCamp hoặc Meetup để tìm hiểu thêm về WordPress, đọc bài viết blog và hướng dẫn về WordPress Cộng đồng là trung tâm của WordPress, đó là điều làm cho wordpress có ngày hôm nay Đóng góp 2.4 Ứng dụng Wordpress được sử dụng ở nhiều website, từ những website cá nhân cho tới những hệ thống website. .. tạo ra nhiều thể loại website khác nhau như blog : Website tin tức Website tạp chí Website giới thiệu doanh nghiệp Website bán hàng – thương mại điện tử Website giáo dục, trường học Website của gia đình, cá nhân, nhóm sở thích Thậm chí với các loại website có độ phức tạp cao như đặt phòng khách sạn, thuê xe, đăng dự án bất động sản,… Hầu như mọi hình thức website với quy mô nhỏ và vừa đều có thể triển... trên thẻ li) Thực tế block cho menu dọc, inline cho menu ngang Tìm hiểu thuộc tính position Sau khi đã hiểu về các thuộc tính ở trên, tiếp tục ta sẽ tìm hiểu về khái niệm cao hơn là position Với thuộc tính này, chúng ta có thể sắp đặt, bố trí một vùng DIV ở bất kỳ đâu trên layout một cách dễ dàng Tuy nhiên, thuộc tính này đòi hỏi phải thật sự hiểu rõ các thuộc tính ở trên và thực hành chúng thành thục... tháng 1/2015 là 4.0.2 Rất nhiều Website nổi tiếng đang sử dụng WordPress làm nền tảng để phát triển như CNN, ebay, bata,… 2.2 Lịch sử phát triển WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất thế giới với... bản WordPress làm cho bạn dễ dàng quản lý nội dung của bạn Tạo bản thảo, xuất bản theo lịch trình và nhìn vào bản sửa đổi bài viết của bạn Bài viết của bạn có thể public hoặc private và có thể bảo vệ post và page bằng mật khẩu Quản lý người dùng Mỏi loại người dùng truy cập vào website của bạn với nhiệm vụ khác nhau Administrators thì quản lý website, Editor quản lý nội dung, tác giả và cộng tác viên... các thông tin quan trọng của website như là tiêu đề trang web, tên đăng nhập cùng mật khẩu của admin và email là xong Nếu muốn website được các công cụ tìm kiếm đánh dấu thì check vào ô 'cho phép các công cụ tìm kiếm đánh chỉ mục trang mạng này' Nhập xong toàn bộ thông tin thì hãy nhấn nút Cài đặt WordPress Quá trình cài đặt sẽ diễn ra trong vài phút, nhanh nhất là một phút và nếu như không có gì xảy... Điều này giúp cho website bạn có thể có sự tham gia của nhiều cộng tác viên, trong khi các người khác thì xem như là một phần của cộng đồng Quản lý Media (hình ảnh, video, ) Rất dễ dàng để bạn có thể tải một bức ảnh hoặc vidoe trong wordpress Đơn giản bạn chỉ cần kéo và thả video/hình ảnh vào công cụ upload và sau đó thêm vào website Bạn có thể dễ dàng thêm thuộc tính alt, title, captions và chèn bức... MySQL, và được cấp phép theo GPLv2 Kết lại một câu là WordPress là mã nguồn mà mình thích nhất bởi ở tính năng, tính dễ sử dụng và đặc biệt là nó nhẹ 2.3 Tính Năng Wordpress CMS 4.5 bản gốc có các module cơ bản sau: Đơn giản Tính đơn giản giúp bạn nhanh chống có được nội dung và các xuất bản online Không gì khác ngoài việc bạn dựng website lên và xuất bản nội dung WordPress được xây dựng để làm cho điều... kết quả tìm kiếm Tài nguyên tham khảo Tìm hiểu về Template Tag Vòng lặp (Loop) Hàm nối get_template_part() Template Tags tổng hợp Template Tags cho Post Template Tags cho ảnh thumbnail của Post Template Tags cho Category và Tag Cấu trúc template trong một theme Hiện nay các theme, ngoài việc họ sử dụng các template bắt buộc của WordPress hay NukeViet thì họ còn sử dụng thêm các template thêm vào Nên