Read "Dynamo, Amazon’s Highly Available Key-value Store" Read "Bigtable, A Distributed Storage System for Structured Data" Read "Streaming Systems" 3, Watermarks Read "Streaming Systems" 1&2, Streaming 101 Read "F1, a distributed SQL database that scales" Read "Zanzibar, Google’s Consistent, Global Authorization System" Read "Spanner, Google's Globally-Distributed Database" Read "Designing Data-intensive applications" 12, The Future of Data Systems IOS development with Swift Read "Designing Data-intensive applications" 10&11, Batch and Stream Processing Read "Designing Data-intensive applications" 9, Consistency and Consensus Read "Designing Data-intensive applications" 8, Distributed System Troubles Read "Designing Data-intensive applications" 7, Transactions Read "Designing Data-intensive applications" 6, Partitioning Read "Designing Data-intensive applications" 5, Replication Read "Designing Data-intensive applications" 3&4, Storage, Retrieval, Encoding Read "Designing Data-intensive applications" 1&2, Foundation of Data Systems Three cases of binary search TAMU Operating System 2 Memory Management TAMU Operating System 1 Introduction Overview in cloud computing 2 TAMU Operating System 7 Virtualization TAMU Operating System 6 File System TAMU Operating System 5 I/O and Disk Management TAMU Operating System 4 Synchronization TAMU Operating System 3 Concurrency and Threading TAMU Computer Networks 5 Data Link Layer TAMU Computer Networks 4 Network Layer TAMU Computer Networks 3 Transport Layer TAMU Computer Networks 2 Application Layer TAMU Computer Networks 1 Introduction Overview in distributed systems and cloud computing 1 A well-optimized Union-Find implementation, in Java A heap implementation supporting deletion TAMU Advanced Algorithms 3, Maximum Bandwidth Path (Dijkstra, MST, Linear) TAMU Advanced Algorithms 2, B+ tree and Segment Intersection TAMU Advanced Algorithms 1, BST, 2-3 Tree and Heap TAMU AI, Searching problems Factorization Machine and Field-aware Factorization Machine for CTR prediction TAMU Neural Network 10 Information-Theoretic Models TAMU Neural Network 9 Principal Component Analysis TAMU Neural Network 8 Neurodynamics TAMU Neural Network 7 Self-Organizing Maps TAMU Neural Network 6 Deep Learning Overview TAMU Neural Network 5 Radial-Basis Function Networks TAMU Neural Network 4 Multi-Layer Perceptrons TAMU Neural Network 3 Single-Layer Perceptrons Princeton Algorithms P1W6 Hash Tables & Symbol Table Applications Stanford ML 11 Application Example Photo OCR Stanford ML 10 Large Scale Machine Learning Stanford ML 9 Anomaly Detection and Recommender Systems Stanford ML 8 Clustering & Principal Component Analysis Princeton Algorithms P1W5 Balanced Search Trees TAMU Neural Network 2 Learning Processes TAMU Neural Network 1 Introduction Stanford ML 7 Support Vector Machine Stanford ML 6 Evaluate Algorithms Princeton Algorithms P1W4 Priority Queues and Symbol Tables Stanford ML 5 Neural Networks Learning Princeton Algorithms P1W3 Mergesort and Quicksort Stanford ML 4 Neural Networks Basics Princeton Algorithms P1W2 Stack and Queue, Basic Sorts Stanford ML 3 Classification Problems Stanford ML 2 Multivariate Regression and Normal Equation Princeton Algorithms P1W1 Union and Find Stanford ML 1 Introduction and Parameter Learning

HTML from W3School 1


html intro

<!DOCTYPE html>  <!-- declare the type of doc -->
<html>          <!-- root element of an html page-->
<head>          <!-- meta info about this doc-->
<title>Page Title</title>  <!--specify a title-->
<body>          <!-- visible page content, only these contents will be displayed-->

<h1>My First Heading</h1>   <!-- a large heading-->
<p>My first paragraph.</p>  <!-- a paragraph -->



  • start,contents,end: <tagname>contents...</tagname>



  • defined with <h1> to <h6>, from the most important to the least
  • with <a> tag
    <a href="">this is a link</a>


  • with <img> tag
<img src='name.jpg' alt='almternative text' width='100' height='142'>


  • headings
  • paragraph
  • <br> a line break
  • remember to add end tag for most tags


  • provide additional info about the element
  • always specified in the start tag
  • comes in pairs like name='value'
  • language, in <html lang="en-US">
  • title, in <p title="I'm a tooltip>
  • href, <a href="">
  • size, alt, in <img>
  • use single quotes if string contain double quotes or vice versa


  • <h1> to <h6>
  • <hr> represents a horizontal rule or line

  • <head> is a container for metadata, define doc title, char set, styles, links, scripts and other info


  • extra spaces and lines will be removed
  • <br> line break, no end tag
  • <pre> will preserve both spaces and line breaks


  • <tagname style="property:value;">
  • background: <body style="background-color:powderblue;">
  • text color: <p style="color:red;"
  • font: <p style="font-family:verdana;"
  • text size: <p style="font-size:300%;"
  • text alignment: <p style="text-align:center;"

text formating

  • <tagname>contents</tagname>
  • bold, b
  • important, strong
  • italic, i
  • emphasized, em
  • marked or highlighted, mark
  • small, small
  • deleted, del
  • inserted, ins
  • subscript, sub
  • superscript, sup


  • <q> for short quotations
  • <blockquote cite="http:..."> for section quote
  • <abbr>, abbreviation, <abbr title="full name">
  • <address>, for address
  • <cite>, a title of work
  • <bdo> override the current text direction


  • <code>
  • <kbd> for keyboard input
  • <samp> for sample output of a program
  • <var> for variables


  • <!-- comments -->


  • red, orange, cyan
  • reg(255,255,255)
  • HEX: #FF00FF


  • stand for Cascading Style Sheets
  • describe how HTML elements are to be displayed on screen
  • saves a lot of work
  • 3 ways to add:

  • Inline (style attr in HTML)
<h1 style="color:blue;">
  • Internal(<style> element in the <head>)
        <style media="screen">
                body {background-color: powderblue;}
                h1   {color: blue;}
                p    {color: red;}
  • external(external CSS file)
    • add a link to the <head> element
<link rel="stylesheet" href="styles.css">
  • styles.css
body {
        background-color: blue;
        font-family: verdana;
        font-size: 300%;
h1 {
        color: green;
p {
        color: red;

CSS font

  • color
  • font-family
  • font-size

CSS Border & padding

  • border around an element
  • padding: space between text and border
  • margin: space outside the border
p {
    border: 1px solid blue;
    padding: 30px;
    margin: 50px;

id attribute

  • define a specific style for one element
    <p id="p01">text</p>
  • then define the id
#p01 {

class attribute

  • define a style for a special type of elements
    <p class="error">
  • then define the style for this class
p.error {


  • defined with <a> tag
    <a href="url">link text</a>
  • relative url without http://www…
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}

target attr

  • define where to open this link
  • target = "option" in <a>
    • _blank - Opens the linked document in a new window or tab
    • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
    • _parent - Opens the linked document in the parent frame
    • _top - Opens the linked document in the full body of the window
    • framename - Opens the linked document in a named frame
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">


  • id attr
<!-- create bookmark -->
<h2 id="tips">Useful Tips Section</h2>
<!-- link to jump to the bookmark -->
<a href="#tips">Visit the Useful Tips Section</a>


  • use style
    • pic in another folder /images/html5.gif
    • style= float:right;, put pic on the right, usually with in a paragraph
      <img src="url" alt="some_text" style="float:right;width:width;height:height;">
  • use width and height
    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
  • image map, add clickable area with <map>

Creative Commons License
Melon blog is created by melonskin. This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
© 2016-2020. All rights reserved by melonskin. Powered by Jekyll.