Halaman web html dengan kode sumber

Jika Anda penyedia konten, baca HTML. Jika Anda seorang desainer grafis, bacalah CSS. Jika Anda seorang programmer dan ingin menambahkan efek dinamis ke halaman web Anda, bacalah JavaScript. Tetapi jika Anda beroperasi di OMO (one-man-operated) dan diharapkan membuat situs web yang terlihat cukup bagus, Anda perlu memahami HTML, CSS, dan JavaScript. Inilah alasan saya menggabungkan HTML dan CSS dalam artikel ini karena keduanya tidak dapat dipisahkan

Untuk membuat situs web OMO, saya menyarankan itu

1. Pahami HTML, CSS, dan JavaScript secara menyeluruh
2. Pilih alat pembuat. Gunakan Dreamweaver jika Anda mampu. Jika tidak, temukan editor kode sumber gratis (seperti VS Code, Sublime Text, Sublime Text, NotePad++). Untuk pemrogram, Eclipse/NetBeans/VSCode adalah pilihan yang baik untuk HTML/CSS/JavaScript karena mereka melakukan pemeriksaan sintaks dan menyediakan pelengkapan kode otomatis
3. Rancang dan atur halaman Anda. Tentukan tampilan dan nuansa situs web Anda. Berapa banyak kolom? . g. , header, menu navigasi, konten utama, sidebar, daftar isi, footer)?
4. Perhatikan baik-baik situs web favorit Anda. CSS sangat besar dan kompleks. Anda tidak dapat menemukan roda ini. Gunakan F12 Debugger untuk memeriksa HTML/CSS situs web favorit Anda
   Gunakan kerangka kerja CSS, seperti BootStrap, untuk memulai desain Anda
5. Mulailah dengan desain CSS awal. Desain situs web dimulai dengan CSS, BUKAN HTML?. Kerjakan CSS Anda
   1. Partisi halaman web Anda menjadi bagian logis melalui

      (atau HTML5',,

      ,), seperti header, konten, footer. Tetapkan The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      _1 ke

      yang unik (mis. g. , "The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      2", "The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      3". Tetapkan nama kelas umum ke bagian (tidak unik) yang memiliki gaya yang sama (mis. g. , "The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      4", "The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      5"). Tulis pemilih-id CSS dan pemilih-kelas (mis. g. , The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      6 The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      7 The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      8) untuk tag umum (seperti The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      9,
      

      target="target-frame-name|_blank|_parent|_self|_top": specifies the target frame into which all linked document should be loaded: "________0_______39" in new window, "________0_______40" in this frame, "________0_______41" in the parent frame, "________0_______42" in the full body of the window.

      Link Resources and Relationship ________19_______0

      Function: Link to another resource and indicate its relationship. There could be more than one ________19_______0 tags in the HEAD section.

      Syntax:

      ________90_______6

      Attributes:

      • rel, rev: indicates the forward or reverse relationship to the current document. Take value of ________0_______45, ________0_______46, ________0_______47, ________0_______48, ________0_______49, ________0_______50, ________0_______51, ________0_______52, ________0_______53, ________0_______54, and ________0_______55 (i.e., author).

      [TODO] other attributes.

      Example:

      ________90_______8

      The above ________19_______0 tags indicate that "________0_______57" is the stylesheet of MIME type "________0_______58"; "________0_______59" is the home page; "________0_______60" is the help page; this page ("________0_______61") is the previous page of "________0_______62" (in a reverse relationship), and this page is the next page of "________0_______63".

      The most-commonly used ________19_______0 is to specify the external CSS style sheet. The rests are hardly used.

      Including an Icon

      A favicon (aka favorite icon, shortcut icon, URL icon) is a file containing a small 16x16 icon. Browser can display the icon besides the URL bar or bookmark. The favicon file is usually called "________0_______65".

      To include an icon, provide a ________19_______0 tag in the section, as follows:

      You can use PhotoShop/Element to create a favicon file; or use a simple imaging tool (such as MS Paint) to create a small image and then submit to an online converter to generate a favicon file.

      Meta Information ________19_______0

      You can use ________19_______0 tag to include meta information about the document, such as keywords, author, expiration date, and page generator. The syntax is:

      ________70_______9

      Examples:

      ________90_______6

      The ________19_______0 tag can also be used to ask the server to insert an HTTP response header (read "HTTP Basics"). The syntax is as follow:

      ________70_______9

      EXAMPLE 1: Auto-Redirect after x seconds

      ________101_______2

      The above ________19_______0 tag triggers the server to include the following "Response Header" in the HTTP response message, when the page is downloaded:

      ________101_______3

      The browser, in response to this response header, redirect to the given URL after 3 sec.

      EXAMPLE 2: Auto-Refresh every x seconds

      ________70_______9

      EXAMPLE 3: Specify the character set used in the HTML document.

      The server will include this response header in the response message, when the page is downloaded:

      ________101_______5Embedded Style Definition ________19_______0

      Function: For embedded style declarations, covered earlier.

      Scripting Codes ________19_______0

      Function: For embedding scripting codes. See my "Introduction to JavaScript" on usage and examples.

      More CSS

      CSS Variables (Custom Properties)

      CSS Variables (aka Custom Properties or Cascading Variables) allows you to define variables and using that variables in multiple properties, in a style sheet. This is really useful in setting themes (without using a preprocessor such as LESS or SASS).

      Rules:

      1. The name of the variables shall begin with two dashes (________0_______73), e.g., ________0_______74.
      2. To reference the variable, use ________0_______75.
      3. To define global-scope CSS variables, place them in the ________0_______76 pseudo-class.

      For examples,

      ________101_______6

      Modifying CSS Properties from JavaScript and jQuery

      To modify the styles of an HTML element from JavaScript, set its ________82_______37 property, e.g.,

      ________101_______7

      To modify the style of an HTML element from jQuery:

      CSS ________0_______78 Property - Positioning the HTML Block Elements

      position: static|absolute|relative|fixed|inherit|initial|unset

      You can use the property ________0_______78 to alter the position of block elements.

      Each element has a natural location inside a page's flow, in the order read in by the browser. By default (________0_______80), elements are displayed from top to bottom in the normal flow. For block elements, line breaks are inserted at the beginning and the end to form a rectangular box.

      You can remove the box from the normal flow and specify its location with respect to either its parent element (________0_______81_) atau jendela browser (The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      82);

      Untuk elemen non-The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      84, posisi baru ditentukan melalui properti The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      85, Table and Images Table and Images Logo of Languages S/No Language Logo 1. HTML5

      2. CSS3

      3. JavaScript

      53, The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      87, Table and Images Table and Images Logo of Languages S/No Language Logo 1. HTML5

      2. CSS3

      3. JavaScript

      54, Lists and Hyperlinks Lists and Hyperlinks

      There are two types of lists in HTML:

      1. Ordered List.
      2. Unordered List.

      This is a nested unordered list of links:

      • Online Validator:
        • W3C Online HTML Validator @ //validator.w3.org/.
        • W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
      • Specifications:
        • HTML5 @ //www.w3.org/TR/html5/.
        • CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

      36, Lists and Hyperlinks Lists and Hyperlinks

      There are two types of lists in HTML:

      1. Ordered List.
      2. Unordered List.

      This is a nested unordered list of links:

      • Online Validator:
        • W3C Online HTML Validator @ //validator.w3.org/.
        • W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
      • Specifications:
        • HTML5 @ //www.w3.org/TR/html5/.
        • CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.

      37

      • atas. kiri. dasar. Kanan. N. N%. mobil. Atur jarak dari tepi elemen ini ke tepi yang sesuai dari blok penampung
      • lebar. tinggi. N. N%. mobil. Atur lebar dan tinggi elemen blok ini
      • z-index. nomor. mobil. Ketika dua blok tumpang tindih karena pemosisian ulang, blok dengan nomor The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        91 yang lebih besar berada di atas (i. e. , z-axis menunjuk ke luar layar seperti pada sistem koordinat grafik 3D standar). Angka negatif diperbolehkan. //validator.w3.org/.
      • W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
   2. Specifications:
      • HTML5 @ //www.w3.org/TR/html5/.
      • CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
   36 dan Lists and Hyperlinks Lists and Hyperlinks

   There are two types of lists in HTML:

   1. Ordered List.
   2. Unordered List.

   This is a nested unordered list of links:

   • Online Validator:
     • W3C Online HTML Validator @ //validator.w3.org/.
     • W3C Online CSS Validator @ //jigsaw.w3.org/css-validator/.
   • Specifications:
     • HTML5 @ //www.w3.org/TR/html5/.
     • CSS3 Selectors @ //www.w3.org/TR/css3-selectors/.
   37). Elemen dengan posisi tetap dikeluarkan dari aliran normal, seolah-olah tidak ada

   Misalnya, tetap

   ditambahkan ke contoh di atas dalam pemosisian absolut. Perhatikan bahwa indeks-z digunakan untuk memastikan bahwa perbaikan

   selalu di atas yang lain

   's, terlepas dari urutan penulisan

   's

   CSS
   

   _12 dan
   

   13 Properti - Mengambang Elemen Kiri atau Kanan

   mengambang. kiri. Kanan. tidak ada

   Anda dapat mendorong elemen ke tepi kiri atau kanan elemen penampung melalui properti
   

   12. Float sering digunakan untuk gambar, dengan teks yang mengelilingi elemen float. Elemen yang mendahului elemen melayang tidak terpengaruh. Elemen setelah elemen mengambang mengalir di sekitarnya

   Anda dapat mengapung secara horizontal (mis. e. , kiri dan kanan), bukan atas dan bawah. Selain gambar, elemen float harus memiliki lebar dan tinggi yang ditentukan secara eksplisit. Elemen float sebenarnya diambil dari aliran normal. Elemen berikut bertindak seolah-olah elemen mengambang tidak ada, tetapi teks yang dilampirkan akan membungkus elemen mengambang

   Jika banyak gambar diapungkan bersama (katakan ke kiri), gambar kedua akan didorong ke tepi kiri gambar pertama, dan seterusnya jika ada ruang horizontal yang tersedia; . Misalnya, kita dapat melayangkan banyak gambar kecil ke kiri sebagai berikut

   Untuk mematikan pelampung, gunakan properti
   

   _13, dan tentukan sisi mana (kiri, kanan atau keduanya) yang tidak mengizinkan elemen pelampung

   jernih. kiri. Kanan. keduanya. tidak ada

   
   

   _16 berarti sisi kiri elemen ini tidak boleh menjadi elemen mengambang. Artinya, kiri harus dimulai dengan margin kiri elemen yang memuatnya.
   
   _16 mirip dengan
   
   
   3
   Menggunakan
   
   _12 untuk membuat kolom

   Elemen blok, secara default, dimulai dari tepi kiri dan menempati lebar penuh dari elemen yang memuatnya. Oleh karena itu, itu tidak akan berbaris satu sama lain dalam format kolom. Anda dapat menggunakan properti
   

   _12 untuk membuat kolom atau kisi

   [TODO] lagi

   Contoh. Memposisikan Iframe

   "
   

   _21"
   <tag-name attName1="attValue1" attName2="attValue2" ...> .. tag-name> _8

   "
   

   _22"
   <tag-name attName1="attValue1" attName2="attValue2" ...> .. tag-name> _9

   Properti CSS
   

   _23 (juga berlaku untuk
   
   
   1) mengapungkan iframe ke margin kiri atau kanan jendela browser

   Anda juga dapat menggunakan properti CSS
   

   _25 untuk memposisikan iframe (dan elemen HTML lainnya), "
   
   26" memposisikan elemen relatif terhadap elemen leluhur yang diposisikan pertama;
   The h1 tags enclose a heading level 1

   The p tags is used to markup a paragraph.

   0

   CSS
   

   _30 dan
   

   31 Properti

   menampilkan. memblokir. Di barisan. inline-blok. tidak ada. Daftar barang. meja. tabel-baris. tabel-sel. kisi. inline-grid

   • blok dan sebaris. Properti
     
     30 mengontrol tata letak dan aliran elemen HTML. Sebagian besar elemen memiliki nilai default
     
     _30 dari
     
     34 (

     ,

     ) atau
     

     _35 (
     
     
     0,
     
     
     0)
     
     
     38 dapat digunakan untuk menampilkan elemen sebaris sebagai blok. Misalnya, Di sisi lain,
     
     _39 dapat digunakan untuk menampilkan inline elemen blok. Misalnya,

   • inline-blok. memadukan elemen dengan aliran teks, sambil memungkinkan kita menggunakan padding, margin, tinggi, dan properti serupa yang tidak memiliki efek yang terlihat pada elemen sebaris
   • tidak ada. TIDAK akan ditampilkan dan tidak memakan ruang (vs.
     
     _40 tidak akan menampilkan elemen tetapi elemen tersebut masih menggunakan ruang)
   • Daftar barang. tampilkan elemen seolah-olah itu adalah a
   • .
   • tabel, baris tabel, sel tabel. untuk menampilkan elemen (

     ) sebagai

   , ,
   3. kisi. ditampilkan dalam kotak, misalnya,

   visibilitas. tersembunyi. bisa dilihat. digunakan untuk menyembunyikan atau menampilkan elemen tanpa menghapus elemen dari aliran normal halaman. Artinya, ruang yang ditempati oleh elemen tersebut dipertahankan

   Bagaimana cara membuat halaman web menggunakan HTML dengan kode sumber?

   Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit. .
   Langkah 1. Buka Notepad (PC) Windows 8 atau yang lebih baru. .
   Langkah 1. Buka TextEdit (Mac) Buka Finder > Applications > TextEdit. .
   Langkah 2. Tulis Beberapa HTML. .
   Langkah 3. Simpan Halaman HTML. .
   Langkah 4. Lihat Halaman HTML di Browser Anda

   Bagaimana Anda kode sumber dalam HTML?

   Untuk melihat kode sumber saja, tekan Ctrl + U pada keyboard komputer Anda. Klik kanan bagian kosong halaman web dan pilih Sumber halaman dari menu pop-up yang muncul .

   Bisakah kode sumber ditulis dalam HTML?

   Membangun fondasi situs web menggunakan kode sumber mencakup penggunaan Hypertext Markup Language (HTML) , yang menentukan struktur konten di situs web.

   Bagaimana cara membuat halaman web menggunakan kode sumber HTML dan CSS?

   Rencanakan tata letak Anda. Langkah pertama dari setiap situs web adalah selalu mengetahui apa yang Anda inginkan di dalamnya dan (samar-samar) tampilan yang Anda inginkan. .
   Siapkan 'kode boilerplate'. .
   Buat elemen dalam tata letak Anda. .
   Isi konten HTML. .
   Tambahkan beberapa CSS tata letak dasar. .
   Tambahkan gaya yang lebih spesifik. .
   Tambahkan warna dan latar belakang. .
   Merayakan